<!doctype html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<title></title> <!-- 비워두기: JS가 채움 -->
<style>
:root{
  --img-w: 600px;
  --thumb-w: 50px;
  --thumb-h: 100px;
  --favbox-w: 400px;   /* 즐겨찾기/목록 공용 가로 */
  --favbox-h: 600px;   /* 즐겨찾기 세로 */
  --wtbox-h: 600px;    /* ✅ 목록(웹툰 리스트) 세로 전용 */
  --ui-fs: 12px;
}

body {
  height: 100%;
  margin: 0;
  background: url("background4.jpg") repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #ccc;
  text-align: center;
}
  h3 { color:#fff; margin:10px; text-shadow:0 0 5px #000; }
  #imgContainer { line-height:0; font-size:0; }
  /* ✅ 고정폭 → 변수 기반 폭 */
  /* img 규칙에 filter 추가 */
img {
  width: var(--img-w, 600px);
  margin: 0 auto;
  display: block;
  border: 0;
  filter: var(--img-filter, none); /* ✅ 추가 */
}
/* 가로 모드 이미지가 화면에 꼭 보이게 */
#imgContainer.hmode img{
  display:block;
  width: auto !important;
  height: auto;
  max-height: calc(100vh - 0px); /* 상단 UI 여백만큼 빼기, 숫자는 취향대로 */
}
/* 겹쳐 쌓기용 컨테이너 */
#imgContainer.hmode{
  position: relative;
  display: block;               /* ← flex 말고 block */
  min-height: calc(100vh - 0px);
  z-index: 1;
}

/* 겹쳐지는 이미지 공통 규칙 */
/* 겹쳐쌓기(스왑) 쓰는 이미지에도 동일 규칙 적용 */
#imgContainer.hmode img.layered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;

  max-height: calc(100vh - 0px);
  max-width: 100vw;
  visibility: hidden; /* 프리로드 후 onload에서 visible로 */
}

  #sentinel { height:5px; }

  /* 로딩 표시 */
  #loading {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 14px; background: rgba(0,0,0,0.6);
    padding: 8px 15px; border-radius: 8px; display: none; animation: fadeInOut 1.2s ease-in-out;
  }
  #loading.searching {
  display: block !important;
  animation: none !important;  /* 깜빡거림 금지 */
  opacity: 1 !important;
}

#loading.done {
  display: block !important;
  animation: fadeOut .6s ease forwards; /* 끝날 때만 서서히 사라짐 */
}
  @keyframes fadeInOut { 0%{opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0} }
  .dot{ display:inline-block; width:4px; height:4px; margin-left:2px; background:#fff; border-radius:50%; animation:blink 1s infinite alternate; }
  .dot:nth-child(2){ animation-delay:.2s } .dot:nth-child(3){ animation-delay:.4s }
  @keyframes blink { from{opacity:.2} to{opacity:1} }

  #pageJumpBox{
    position:fixed; top:10px; right:10px; z-index:9999;
    background:rgba(0,0,0,.7); color:#fff; padding:8px 12px; border-radius:6px; font-size: var(--ui-fs);
    box-shadow:0 0 6px rgba(0,0,0,.5);
    text-align:left;
	z-index: 10;
  }


  #pageInput{ width:40px; text-align:center; font-size: var(--ui-fs); border:none; border-radius:4px; padding:2px; background: #4a4a4a;color: #fff;}
  #fileInput{ width:60px; text-align:center; font-size: var(--ui-fs); border:none; border-radius:4px; padding:2px; background: #4a4a4a;color: #fff; }
/* jumpBtn과 동일 스타일을 find/clear 버튼에 적용 */
#jumpBtn,
#findLastBtn,
#clearDetectedBtn {
  margin-left: 0px;
  font-size: var(--ui-fs);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: #555;
  color: #fff;
  padding: 3px 8px;
}
/* hover / focus */
#jumpBtn:hover,
#findLastBtn:hover,
#clearDetectedBtn:hover,
#jumpBtn:focus,
#findLastBtn:focus,
#clearDetectedBtn:focus {
  background: #666;
  outline: none;
}
/* active (클릭시) */
#jumpBtn:active,
#findLastBtn:active,
#clearDetectedBtn:active {
  transform: translateY(1px);
}
/* disabled 상태 스타일 (버튼 비활성화 시) */
#jumpBtn[disabled],
#findLastBtn[disabled],
#clearDetectedBtn[disabled] {
  opacity: 0.5;
  cursor: default;
}

  /* ✅ 줌 컨트롤 */
  #zoomBox{ margin-top:3px; }
  .zoomBtn{
    margin-right:0px; font-size: var(--ui-fs); cursor:pointer; border:none; border-radius:4px;
    background:#444; color:#fff; padding:1px 3px;
  }
  .zoomBtn:hover{ background:#666; }
  #zoomLevel{ font-size: var(--ui-fs); opacity:.9; }
  /* 공통 활성 스타일 */
.zoomBtn.active {
  background: #0a84ff;         /* 파란 강조 */
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset;
}

/* 배경 버튼은 다른 색감으로 */
.bgBtn.active {
  background: #14b8a6;         /* 민트 강조 */
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset;
}
    /* 리스트 아이템 텍스트 공통 */
.wt-item {
  display: block;
  max-width: 150px;      /* 원하는 폭으로 조절 */
  white-space: nowrap;   /* 한 줄 */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 목록 박스 크기 고정 + 넘치면 스크롤 */
#wtList{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-x: hidden;   /* ← 가로 스크롤 숨김 */
  max-height: var(--wtbox-h);   /* ✅ 목록 세로는 전용 변수로 */
  overflow-y: auto;
  max-width: var(--favbox-w);   /* 가로는 즐겨찾기와 공용 */
}
  /* 즐겨찾기 박스 */
#favBox{
  margin-top:3px;
  background:rgba(0,0,0,.45);
  padding:6px;
  border-radius:6px;
  width: var(--favbox-w);         /* ✅ 가로 고정: 변수 사용 */
  padding-right: 4px;  /* 오른쪽 여유 */
  padding-bottom: 4px; /* 아래쪽 여유 */
}
#favBox .favHeader{
  display:flex; align-items:center; justify-content:space-between;
  font-size: var(--ui-fs); color:#fff; margin-bottom:4px;padding:1px;
}
#favBox .favActions .zoomBtn{ padding:1px 3px; margin-left:4px; }
#favBox #favList{
  display:flex; flex-wrap:wrap; gap:2px;
  max-height: var(--favbox-h);   /* ✅ 세로 스크롤 높이: 변수 사용 */
  overflow:auto;
  padding-right: 4px;  /* 오른쪽 여유 */
  padding-bottom: 4px; /* 아래쪽 여유 */
}
.favItem{
  position:relative; 
  width: var(--thumb-w);   /* 캡션/삭제버튼 영역 폭도 썸네일 폭과 일치 */
  
  text-align:center;
}
.favThumb{
  position: relative;       /* 포지셔닝 기준 */
  overflow: hidden;         /* 넘치는 이미지 가리기 */
  width:  var(--thumb-w);
  height: var(--thumb-h);
  border-radius:4px; box-shadow:0 0 4px rgba(0,0,0,.5);
  background:#111; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.favThumb img{
  position: absolute;  /* ← 중요: 절대 배치 */
  display: block;
  /* object-fit/position 제거 (이 방식에선 안 씀) */
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
  backface-visibility:hidden;
  transform: translateZ(0);
}
.favCap{
  margin-top:3px;
  font-size: var(--ui-fs);
  color:#eee;
  line-height:1.2;
  display:-webkit-box;
  width:100%;
  overflow:hidden;
  -webkit-line-clamp:2;        /* 2줄까지만 */
  -webkit-box-orient:vertical;
  word-break: break-word;       /* 긴 단어도 줄바꿈 허용 */
  /* word-break: keep-all;  <-- 이 줄은 제거 */
}
.favDel {
  position: absolute;
  top: -0px;              /* 버튼 위치 살짝 위로 */
  right: -0px;            /* 오른쪽도 살짝 바깥쪽으로 */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #c33;
  color: #fff;
  font-size: var(--ui-fs);
  display: flex;          /* 중앙 정렬용 추가 */
  align-items: center;    /* 세로 가운데 */
  justify-content: center;/* 가로 가운데 */
  box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.favHint{ font-size: var(--ui-fs); color:#ddd; opacity:.9; margin-top:3px; }
/* 숨김 상태일 때 */
.hiddenBox {
  display: none !important;
}
/* === Webtoon List Box === */
.wt-box {
  margin-top: 3px;
  background: rgba(0,0,0,.45);
  padding: 6px;
  border-radius: 6px;
  width: var(--favbox-w);
  overflow-x: hidden;   /* ← 혹시 모를 넘침 차단 */
}

/* 헤더 라인 */
.wt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: var(--ui-fs);
  margin-bottom: 4px;
}

/* 편집 패널 */
.wt-edit-panel {
  display: none;           /* 기본 닫힘 */
  margin-bottom: 6px;
}

.wt-textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  padding: 6px;
  background: #2a2a2a;
  color: #fff;
  font-family: inherit;
  font-size: var(--ui-fs);
  line-height: 1.4;
  resize: vertical;
  min-height: 3.5em;
}

/* 구분자 라인 */
.wt-delim-row {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wt-delim-input {
  width: 15px;
  padding: 2px 6px;
  border: 1px solid #444;
  background: #1f1f1f;
  color: #fff;
  border-radius: 4px;
  font-size: var(--ui-fs);
  text-align: center; 
}

/* 버튼 행(저장/취소) */
.wt-btn-row {
  margin-top: 3px;
  display: flex;
  gap: 4px;
}

/* 목록 그리드 */
.wt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 힌트 문구 */
.wt-hint {
  font-size: var(--ui-fs);
  opacity: .8;
}

/* 반응형 살짝 보완 */
@media (max-width: 520px) {
  .wt-delim-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wt-delim-input {
    width: 57px;
  }
}

/* 숨김 후 남는 작은 복귀 버튼 */
#showBoxBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9998;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--ui-fs);
  padding: 5px 10px;
  cursor: pointer;
  display: none;
}
#showBoxBtn:hover { background: rgba(80,80,80,0.8); }

/* 텍스트 모드용 */
.favListText { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 6px; }
.favTextItem  { display: contents; } /* 각 행을 두 칸으로 */
.favTextLink  { 
  text-align:left; font-size: var(--ui-fs); color:#fff; background:#333; 
  border:none; border-radius:4px; padding:4px 6px; cursor:pointer;
}
.favTextLink:hover { background:#555; }
.favTextDel {
  width: 18px; height: 18px; border-radius:50%; border:none; cursor:pointer;
  background:#c33; color:#fff; font-size: var(--ui-fs); 
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 3px rgba(0,0,0,.5);
}

/* 썸네일/텍스트 버튼 간격(선택) */
#favBox .favActions .zoomBtn { padding:1px 3px; margin-left:1px; }
/* === Idle 보호막(무입력 시 검정 화면) === */
#idleShield{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;         /* 평소엔 이벤트 통과 */
  transition: opacity .25s ease;
  z-index: 10000;               /* 페이지 UI(9999)보다 위 */
}
#idleShield.on{
  opacity: 1;
  pointer-events: auto;         /* 켜지면 클릭/터치 받음 */
}
/* === LocalStorage 뷰어 === */
#lsOverlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  z-index: 12000; /* 상단 UI(9999)보다 위 */
}
#lsPanel{
  position: fixed; top: 60px; right: 10px;
  width: min(720px, 92vw);
  max-height: 70vh; overflow: auto;
  background: rgba(20,20,20,.95);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  border-radius: 10px;
  padding: 10px;
  display: none;
  z-index: 12001;
  color: #eaeaea;
  font-size: var(--ui-fs);
}
#lsPanel header{
  display: flex; align-items:center; gap: 8px; justify-content: space-between;
  margin-bottom: 8px;
}
#lsPanel header .left{
  display:flex; align-items:center; gap:8px;
}
#lsPanel h4{ margin: 0; font-size: 14px; }
#lsSearch{
  width: 200px; border:none; border-radius:6px; padding:4px 8px; background:#2a2a2a; color:#fff;
  font-size: var(--ui-fs);
}
#lsRefresh, #lsClose, #lsClearAll{
  border:none; border-radius:6px; padding:4px 8px; cursor:pointer;
  background:#444; color:#fff; font-size: var(--ui-fs);
}
#lsClearAll{ background:#7a3333; }
#lsRefresh:hover, #lsClose:hover{ background:#666; }
#lsClearAll:hover{ background:#a33; }

#lsTable{
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
#lsTable thead th{
  position: sticky; top: 0; background: #171717; z-index: 1;
  padding: 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 600;
}
#lsTable td{
  padding: 6px; vertical-align: top; border-bottom: 1px dashed rgba(255,255,255,.07);
  word-break: break-all;
}
#lsTable .k{ width: 42%; color:#fff; }
#lsTable .v{ width: 48%; color:#ddd; }
#lsTable .a{ width: 10%; text-align: right; }

.lsActionBtn{
  border:none; border-radius:6px; padding:3px 6px; cursor:pointer;
  background:#333; color:#fff; font-size: var(--ui-fs); margin-left:4px;
}
.lsActionBtn:hover{ background:#555; }

/* 작게 반투명 설명 */
#lsHelp{
  opacity:.7; font-size: calc(var(--ui-fs) - 1px); margin-top: 3px;
}
/* 셀렉트 박스 기본 */
#subfolderSelect{
  background: #4a4a4a;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 0px 0px;
  margin:0px;
  outline: none;
  font-size: var(--ui-fs);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 호버/포커스 */
#subfolderSelect:hover{
  background:#555;
  border-color:#777;
}
#subfolderSelect:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
  border-color:#888;
}

/* 옵션 항목도 가능한 범위에서 색 맞추기 (브라우저별 지원 상이) */
#subfolderSelect option{
  background:#3f3f3f;
  color:#fff;
}
#bookTitleInline {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}
#bookTitleInline,
#currentPageWrap,
#currentPage {
  height: 16px;
  }
/* 목록 항목 전체 컨테이너 */
.wt-item-wrap {
  position: relative;        /* 🔹 자식의 절대 위치 기준 */
  display: inline-block;
}

/* 삭제 버튼 (✕) — 오른쪽 상단에 살짝 겹치게 */
.wtDel {
  position: absolute;
  top: -1px;              /* 버튼 위치 살짝 위로 */
  right: -6px;            /* 오른쪽도 살짝 바깥쪽으로 */
  width: 8px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #c33;
  color: #fff;
  font-size: 6px;
  display: flex;          /* 중앙 정렬용 추가 */
  align-items: center;    /* 세로 가운데 */
  justify-content: center;/* 가로 가운데 */
  box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.wtDel:hover {
  background: #d44;
  transform: scale(1.1);
}
/* 일반 목록 버튼 */
.wt-item {
  color: #fff;
}

/* 🔹 온라인 주소 전용 색상 */
.wt-item.wt-online {
  color: #80dfff;              /* 하늘색 느낌 */
  border-color: #3399cc;
  text-shadow: 0 0 4px rgba(0,255,255,0.5);
}

/* 마우스 오버 시 강조 */
.wt-item.wt-online:hover {
  background: rgba(0, 128, 255, 0.35);
  color: #b3ecff;
}
/* 🔹 로컬 절대경로 전용 색상 */
.wt-item.wt-local {
  color: #a0ffa0;                       /* 연한 초록색 */
  border-color: #00aa00;
  text-shadow: 0 0 4px rgba(0,255,0,0.4);
}
.wt-item.wt-local:hover {
  background: rgba(0, 200, 0, 0.25);
  color: #d0ffd0;
}
/* 서브폴더 셀렉트: 버튼 느낌 */
.subSel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #444;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 1px 20px 1px 6px;   /* 오른쪽 여백 넉넉히 */
  height: 20px;                /* zoomBtn 높이와 비슷하게 */
  line-height: 18px;
  font-size: var(--ui-fs);
  margin-left: 4px;            /* L 버튼과 간격 */
  max-width: 300px;            /* 기존 maxWidth 유지 */
  cursor: pointer;
}

/* 호버/포커스 느낌 zoomBtn과 통일 */
.subSel:hover,
.subSel:focus {
  background: #555;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
}

/* 화살표 아이콘(선택): 필요 없으면 이 블록 삭제해도 됨 */
.subSel {
  background-image:
    linear-gradient(transparent, transparent),
    radial-gradient(circle at 50% 50%, #ddd 0, #ddd 45%, transparent 46%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 8px center, right 14px center; /* 첫번째는 투명 */
  background-size: 0 0, 4px 4px;                             /* 점처럼 */
}
/* 확장자 선택 박스 & 버튼 */
#extBox { margin-top:3px; margin-left: 0px;}
.extBtn{
  margin-right:0px; font-size: var(--ui-fs); cursor:pointer; border:none; border-radius:4px;
  background:#444; color:#fff; padding:1px 3px; margin-left: 0px;
}
.extBtn:hover{ background:#666; }
/* 활성화 표시 */
.extBtn.active{
  background:#0a84ff;      /* 파란색 강조 */
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.2) inset;
}
/* 탐지용 확장자 선택 */
#extPickBox { margin-top:3px; margin-left: 0px;}
.extPickBtn{
  margin-right:0px; font-size: var(--ui-fs); cursor:pointer; border:none; border-radius:4px;
  background:#444; color:#fff; padding:1px 3px; margin-left: 0px;
}
.extPickBtn:hover{ background:#666; }
/* 선택됨 표시(복수 가능) */
.extPickBtn.active{
  background:#14b8a6;   /* 청록색 계열 */
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.2) inset;
}
/* 스캔 깊이( maxScan ) 선택 */
#scanDepthBox{
  display:flex; flex-wrap:wrap; align-items:center; gap:0px;
  margin-top:3px; margin-left:0;
}
.scanBtn{
  cursor:pointer; border:none; border-radius:4px;
  background:#444; color:#fff; padding:1px 6px;
  font-size: var(--ui-fs); line-height:18px; margin:0;
}
.scanBtn:hover{ background:#666; }
.scanBtn.active{
  background:#9b59b6;               /* 보라색 강조 */
  color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.2) inset;
}
#scanDepthBox .label{ margin-right:0px; font-size: var(--ui-fs); color:#ddd; }

/* 탐지용 패딩(자릿수) 선택 */
#padPickBox{
  display:flex; flex-wrap:wrap; align-items:center; gap:1px;
  margin-top:3px; margin-left:0;
}
.padPickBtn{
  cursor:pointer; border:none; border-radius:4px;
  background:#444; color:#fff; padding:1px 6px;
  font-size: var(--ui-fs); line-height:18px; margin:0; 
}
.padPickBtn:hover{ background:#666; }
.padPickBtn.active{
  background:#f39c12;            /* 주황 강조 */
  color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.2) inset;
}
#padPickBox .label{ margin-right:0px; font-size: var(--ui-fs); color:#ddd; }


/* 접힘: keep-on-fold / #favBox / #wtBox만 보이기 */
#pageJumpBox.fold-rest > *:not(.keep-on-fold):not(#favBox):not(#wtBox){
  display: none !important;
}

/* 즐겨찾기 박스만 접기: 헤더만 남기고 나머지 숨김 */
#favBox.fold-fav > *:not(.favHeader) { display: none !important; }
/* 접혔을 때 헤더 스타일 약간 강조(선택) */
#favBox.fold-fav .favHeader { border-bottom: 1px solid #333; }
</style>
</head>
<body>
<!-- ✅ 우측 상단 페이지 바로가기 + 줌 컨트롤 -->
<div id="pageJumpBox">
<div><span id="bookTitleInline"></span>
<span id="currentPageWrap" style="margin-left:3px;">P: <b id="currentPage">1</b></span>
/<span id="totalPage">0</span>
<!-- ✅ 서브폴더 셀렉트: 위치는 네가 원하는 곳에 두면 됨 -->
<select id="subfolderSelect" class="subSel" title="스캔/저장된 서브폴더로 이동">
  <option value="">서브폴더 선택</option>
</select>
<button id="lsOpenBtn" class="zoomBtn" title="로컬스토리지 보기">L</button>
<button class="zoomBtn" id="toggleBoxBtn" title="페이지 박스 숨기기/보이기">X</button>
</div>
<div style="margin-top:3px">
<span>모드 : </span>
<button class="zoomBtn" id="filterBWBtn" style="margin-left:2px;">흑백</button>
<button class="zoomBtn" id="toggleFullBtn" title="전체화면 전환">전체</button>
<button class="zoomBtn" id="toggleOrientationBtn" style="margin-right:4px;">가로</button>
</div>
<div>
스캔<button id="scanAllSubsBtn" class="zoomBtn">전체</button>

<!-- 파일명 접두어 입력 + 적용 버튼 (즐겨찾기 박스 위에 배치) -->
  <span>파일접두어:</span>
  <input type="text" id="fileInput" placeholder="예: image_">
  <button class="zoomBtn" id="applyPrefixBtn">적용</button>

</div>
  <div>
    페이지:
    <input type="number" id="pageInput" min="1" step="1">
    
    <button id="jumpBtn" class="zoomBtn">이동</button>
    <button id="findLastBtn" class="zoomBtn" title="숫자로된 5자리이하 첫파일(0~3)과 확장자 jpg webp png 파일갯수 검색">찾기</button>
    <button id="clearDetectedBtn" class="zoomBtn" title="첫파일명 확장자 파일갯수 초기화">리셋</button><br>
    <!-- 장/이동 라인 안쪽 어딘가에 추가 -->

<!--<button class="zoomBtn" id="favAddCurrent" title="현재 페이지를 즐겨찾기에 추가">현페이지 추가</button>-->

  <!-- ✅ 화면 크기(줌) 컨트롤: 원본, -10%, +10%, 맞춤 -->
  <div id="zoomBox">
    확대:
    <button class="zoomBtn" id="zoomReset">기본</button>
	<button class="zoomBtn" id="zoomOut">-10%</button>
	<button class="zoomBtn" id="zoomIn">+10%</button>
	<button class="zoomBtn" id="zoomFit">맞춤</button>
	<button class="zoomBtn" id="zoomReal">실제</button> <!-- ✅ 추가 -->
	<span id="zoomLevel">(100%)</span>
</div>

  <span>배경:</span>
  <button class="zoomBtn bgBtn" data-color="default">백</button>
  <button class="zoomBtn bgBtn" data-color="black">흑</button>
  <button class="zoomBtn bgBtn" data-color="sky">하늘</button>
  <button class="zoomBtn bgBtn" data-color="pink">분홍</button>
  <button class="zoomBtn bgBtn" data-color="salmon">살구</button>
</div>
<div id="extBox">
  <span>현재: </span>
  <button class="extBtn" data-ext="jpg">JPG</button>
  <button class="extBtn" data-ext="webp">WEBP</button>
  <button class="extBtn" data-ext="png">PNG</button>
  <button class="extBtn" data-ext="jpeg">JPEG</button>
  <button class="extBtn" data-ext="gif">GIF</button>
  <button class="extBtn" data-ext="avif">AVIF</button>
</div>
<div id="extPickBox">
  <span>검색: </span>
  <button class="extPickBtn" data-ext="jpg">JPG</button>
  <button class="extPickBtn" data-ext="webp">WEBP</button>
  <button class="extPickBtn" data-ext="png">PNG</button>
  <button class="extPickBtn" data-ext="jpeg">JPEG</button>
  <button class="extPickBtn" data-ext="gif">GIF</button>
  <button class="extPickBtn" data-ext="avif">AVIF</button>

</div>
<span>검색 번호 깊이: (만화 시작번호 찾는 범위 0~ )</span>
<div id="scanDepthBox">
  <span class="label"></span>
  <button class="scanBtn" data-scan="0">0</button>
  <button class="scanBtn" data-scan="1">1</button>
  <button class="scanBtn" data-scan="2">2</button>
  <button class="scanBtn" data-scan="3">3</button>
  <button class="scanBtn" data-scan="4">4</button>
  <button class="scanBtn" data-scan="5">5</button>
  <button class="scanBtn" data-scan="6">6</button>
  <button class="scanBtn" data-scan="7">7</button>
  <button class="scanBtn" data-scan="8">8</button>
  <button class="scanBtn" data-scan="9">9</button>
  <button class="scanBtn" data-scan="10">10</button>
  <button class="scanBtn" data-scan="1">기본</button>

</div>
<span>검색 자릿수: (예: 0001.jpg 자릿수 4)</span>
<div id="padPickBox">
  <span class="label"></span>
  <button class="padPickBtn" data-pad="0">1</button>
  <button class="padPickBtn" data-pad="2">2</button>
  <button class="padPickBtn" data-pad="3">3</button>
  <button class="padPickBtn" data-pad="4">4</button>
  <button class="padPickBtn" data-pad="5">5</button>
  <button class="padPickBtn" data-pad="6">6</button>
  <button class="padPickBtn" data-pad="7">7</button>
  <button class="padPickBtn" data-pad="8">8</button>
  <button class="padPickBtn" data-pad="9">9</button>
  <button class="padPickBtn" data-pad="10">10</button>
  <button class="zoomBtn" id="padPickAll">기본</button>
</div>
<!-- ✅ 목록 박스 높이 조절 (즐겨찾기 위) -->
<div style="margin-top:3px">
  <span>목록: </span>
  세로
  <button class="zoomBtn" id="wtBoxHMinus">−</button>
  <span id="wtBoxHLabel">600</span>px
  <button class="zoomBtn" id="wtBoxHPlus">+</button>
</div>
<div style="margin-top:3px">
  <span>즐겨찾기: </span>
  가로
  <button class="zoomBtn" id="favBoxWMinus">−</button>
  <span id="favBoxWLabel">400</span>px
  <button class="zoomBtn" id="favBoxWPlus">+</button>
  &nbsp;세로
  <button class="zoomBtn" id="favBoxHMinus">−</button>
  <span id="favBoxHLabel">600</span>px
  <button class="zoomBtn" id="favBoxHPlus">+</button>
</div>
<div style="margin-top:3px">
  <span>썸네일: </span>
  가로
  <button class="zoomBtn" id="thumbWMinus">−</button>
  <span id="thumbWLabel">50</span>px
  <button class="zoomBtn" id="thumbWPlus">+</button>
  &nbsp;세로
  <button class="zoomBtn" id="thumbHMinus">−</button>
  <span id="thumbHLabel">100</span>px
  <button class="zoomBtn" id="thumbHPlus">+</button>
</div>
<!-- 즐겨찾기 박스 위, pageJumpBox 안 어딘가에 추가 -->
<div id="wtBox" class="wt-box">
  <div class="wt-head">
    <span>작품 목록</span>
    <div>
      <button class="zoomBtn" id="wtEditBtn"  title="목록 수정">수정</button>
      <button class="zoomBtn" id="wtClearBtn" title="초기화">리셋</button>
	  <button class="zoomBtn" id="wtToggleBtn" title="목록 접기/펼치기">▼</button>
    </div>
  </div>

  <!-- 편집 폼(토글) -->
  <div id="wtEditPanel" class="wt-edit-panel">
    <textarea id="wtInput" class="wt-textarea" rows="4"
      placeholder="제목을 한 줄에 하나씩 입력 (예: 표시제목|실제제목)"></textarea>

    <!-- 구분자 설정 -->
    <div class="wt-delim-row">
      <label style="font-size:var(--ui-fs); opacity:.9;">
        구분자:
        <input id="wtDelimiter" type="text" class="wt-delim-input" placeholder="|" />
      </label>
      <span style="font-size:var(--ui-fs); opacity:.7;">
        (예: <code>표시제목|실제제목</code>)
      </span>
    </div>

    <div class="wt-btn-row">
      <button class="zoomBtn" id="wtSaveBtn">저장</button>
      <button class="zoomBtn" id="wtCancelBtn">취소</button>
    </div>
  </div>

  <!-- 목록 -->
  <div id="wtList" class="wt-list"></div>
  <div id="wtHint" class="wt-hint favHint">※ 온라인(http~)은 하늘색 로컬주소(D:\~)는 초록색 같은폴더는 회색.</div>
</div>
<!-- 배경 버튼들 바로 아래에 추가 -->
<div id="favBox">
  <div class="favHeader">
    <span>즐겨찾기</span>
	
    <div class="favActions">
	  <button class="zoomBtn" id="favAddCurrentPos" title="현재 페이지의 '현재 위치'로 즐겨찾기">추가</button>
      <button class="zoomBtn" id="favViewThumb" title="썸네일로 보기">그림</button>
      <button class="zoomBtn" id="favViewText"  title="텍스트로 보기">글자</button>
      <button class="zoomBtn" id="favSortName" title="이름순 정렬">이름</button>
      <button class="zoomBtn" id="favSortPage" title="번호순 정렬">번호</button>
      <button class="zoomBtn" id="favAddBtn" title="현재 화면에서 페이지 번호로 직접 추가">+</button>
      <button class="zoomBtn" id="favResetBtn" title="즐겨찾기를 기본값으로 되돌림">리셋</button>
    </div>
  </div>
  <div id="favList"></div>
  <div class="favHint">※ 이미지 <b>Alt+클릭</b>시 페이지뿐 아니라 위치까지 즐겨찾기에 추가됨.</div>
</div>
</div>

<div id="imgContainer"></div>
<div id="sentinel"></div>

<div id="toast" style="display:none; position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff; padding:6px 10px; border-radius:8px; font-size:13px; z-index:9999;">
</div>
<!-- 로딩 표시 -->
<div id="loading">로딩 중<span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<button id="showBoxBtn" title="페이지 컨트롤 표시">≡</button>
<div id="idleShield" aria-hidden="true" title="화면 보호 해제하려면 탭/클릭"></div>

<div id="lsOverlay"></div>
<div id="lsPanel" role="dialog" aria-modal="true" aria-labelledby="lsTitle">
  <header>
    <div class="left">
      <h4 id="lsTitle">로컬스토리지</h4>
      <input id="lsSearch" type="search" placeholder="키/값 검색…" />
      <button id="lsRefresh">새로고침</button>
    </div>
    <div class="right">
      <button id="lsClearAll" title="로컬스토리지 전체 삭제(주의)">전체삭제</button>
      <button id="lsClose">닫기</button>
    </div>
  </header>
  <table id="lsTable">
    <thead>
      <tr><th>Key</th><th>Value</th><th></th></tr>
    </thead>
    <tbody id="lsTbody"></tbody>
  </table>
  <div id="lsHelp">키 삭제는 행의 버튼, 값 복사는 버튼을 누르세요.</div>
</div>
<script>
/* ---------- 기존 상단 코드에서 변경된 부분들 ----------
   1) totalImages를 let으로 변경(탐지 후 갱신 가능)
   2) pad4 (이미 존재) 사용 유지
   3) findLastImageIndex 함수 추가
*/

// === 작품 목록(Webtoon list) ===
const WEBTOON_LIST_KEY = 'webtoonlist';   // 사용자가 지정한 키 이름 유지

// ----- 폴더 유틸 -----
const ensureSlash = (s) => (s && s.endsWith('/')) ? s : (s + '/');

// 기존: const BOOK_TITLE = "";
// 권장 대체 (파일명에서 자동 생성 — BOOK_TITLE이 빈 문자열일 때만)
const FILE_ID = (() => {
  const raw  = decodeURIComponent((location.pathname.split('/').pop() || '').trim());
  const base = raw.replace(/\.[^/.]+$/, '').trim(); // 확장자 제거
  return base || '[untitled]';
})();

// ✅ 활성 제목(선택된 작품) 오버라이드 키
const ACTIVE_TITLE_KEY = `webtoon_active_title:${FILE_ID}`;

let BOOK_TITLE = ""; // 비어있으면 파일명에서 가져옵니다

if (!BOOK_TITLE) {
  // URL 경로의 마지막 조각(파일명)을 가져와 확장자 제거 → 언더바/대시를 공백으로 바꿔 트리밍
  const raw = decodeURIComponent(window.location.pathname.split('/').pop() || '');
  const derived = raw.replace(/\.[^/.]+$/, '').replace(/[_-]+/g, ' ').trim();
  BOOK_TITLE = derived || '[제목 없음]';
}

// 4) 목록 선택이 있으면 BOOK_TITLE을 '지금' 덮어쓴다 (이게 포인트!)
try {
  const picked = localStorage.getItem(ACTIVE_TITLE_KEY);
  if (picked && picked.trim()) BOOK_TITLE = picked.trim();
} catch(e){}

// ✅ 지금 '목록 기반'으로 작품이 선택되어 있는지 판정
function isListSelectionActive(){
  try {
    const t = localStorage.getItem(ACTIVE_TITLE_KEY);
    return !!(t && t.trim());
  } catch(e){ return false; }
}

// ✅ 목록 선택 시 사용할 "네임스페이스 소유자" = BOOK_TITLE(=선택한 제목)
//    목록 미선택(기본) 시에는 FILE_ID 그대로 사용
function getNamespaceOwner(){
  if (isListSelectionActive()) {
    const t = localStorage.getItem(ACTIVE_TITLE_KEY);
    if (t && t.trim()) return t.trim();     // 목록에서 고른 '작품 제목'
  }
  return FILE_ID;                             // 목록 미선택: 파일별 네임스페이스
}

// ✅ 최종 NS 함수 (여기 하나만 쓰면 됨)
const NS = (k) => `[${getNamespaceOwner()}]:${k}`;

// 화면 표시용 제목에서 앞의 [..] 태그 제거 (이미 displayTitle이 있으면 그걸 써도 OK)
const baseName = BOOK_TITLE.replace(/^\s*\[[^\]]+\]\s*/, '').trim();

// 메인 폴더 (원래 BOOK_TITLE 폴더)
const mainFolderRaw = ensureSlash(BOOK_TITLE);
const mainFolder    = encodeURI(mainFolderRaw);  // URL 세이프

// 서브폴더 이름: "<제목> 1화"
let subfolderNumber = 1;
let subfolderSuffix = '화';
const subfolderNameRaw = `${baseName} ${subfolderNumber}${subfolderSuffix}`;
const subfolderName    = ensureSlash(subfolderNameRaw);  // 끝에 / 보장
const subfolderEncoded = encodeURI(subfolderName);       // URL 세이프

// 서브폴더 사용 여부 (toggle)
let subfolderExists = false;  // 필요 시 true로

// 최종 폴더 경로: 전역에서 쓸 수 있게 let으로 한 번만 선언
let folder = mainFolder;  // 기본: 메인 폴더
if (subfolderExists) {
  folder = mainFolder + subfolderEncoded;   // 메인/서브 결합 (둘 다 인코딩됨)
  // ✅ 제목도 서브폴더명으로 자동 변경
  document.addEventListener('DOMContentLoaded', () => {
    document.title = subfolderNameRaw; // "피의 흔적 1화" 같은 형태
    const t = document.getElementById('bookTitle');
    if (t) t.textContent = subfolderNameRaw;
  });
}

function buildSubfolderRoot(mainRoot) {
  const subfolderNameRaw = `${baseName} ${subfolderNumber}${subfolderSuffix}`;
  // 세그먼트별 인코딩을 쓰고 있으면 분리해서 처리해도 OK. 여기선 간단히:
  const subEncoded = encodeURI(ensureSlash(subfolderNameRaw));
  return ensureSlash(ensureSlash(mainRoot) + subEncoded);
}
function buildSubfolderRootFor(mainRoot, num, suffix = subfolderSuffix) {
  const subfolderNameRaw = `${baseName} ${num}${suffix}`;
  const subEncoded = encodeURI(ensureSlash(subfolderNameRaw));
  return ensureSlash(ensureSlash(mainRoot) + subEncoded);
}

// 참고) folder 예시
// subfolderExists=false → "<BOOK_TITLE>/"
// subfolderExists=true  → "<BOOK_TITLE>/<baseName> 1화/"
// 여러 서브폴더를 연속 스캔할 때 페이지 새로고침을 막기 위한 플래그
let SUPPRESS_AUTO_RELOAD = false;

// 화면 표시용 제목: 맨 앞의 [ ... ] 태그만 제거
const displayTitle = BOOK_TITLE.replace(/^\s*\[[^\]]+\]\s*/, '').trim();


// ==== 구분자 저장 키/기본값 ====
const WEBTOON_PAIR_DELIM_KEY = 'webtoon_list_pair_delim';
const WEBTOON_PAIR_DELIM_DEFAULT = '|';

function getPairDelim(){
  const v = (localStorage.getItem(WEBTOON_PAIR_DELIM_KEY) || '').trim();
  return v ? v : WEBTOON_PAIR_DELIM_DEFAULT;
}
function setPairDelim(d){
  const v = String(d ?? '').trim();
  localStorage.setItem(WEBTOON_PAIR_DELIM_KEY, v || WEBTOON_PAIR_DELIM_DEFAULT);
}


const LAST_READ_KEY = NS('last_read_v1'); // 예: "[파일ID]:last_read_v1"
// ==== 새로고침 후 이어보기(Resume) 키 ====
const RESUME_KEY = NS('resume_after_reload_v1');

function saveLastRead(rootEnc, page, pos = 0){
  try {
    const payload = {
      root: ensureSlash(rootEnc || IMAGE_ROOT || ''),
      page: Math.max(1, parseInt(page,10) || 1),
      pos:  Math.max(0, Math.min(1, +pos || 0)),
      ts:   Date.now()
    };
    localStorage.setItem(LAST_READ_KEY, JSON.stringify(payload));
  } catch(e){}
}

function loadLastRead(){
  try {
    const raw = localStorage.getItem(LAST_READ_KEY);
    if (!raw) return null;
    const o = JSON.parse(raw);
    if (o && typeof o.root === 'string' && Number.isFinite(o.page)) return o;
  } catch(e){}
  return null;
}

function saveResumeAfterReload(rootEnc, page = 1, pos = 0) {
  try {
    const payload = {
      root: ensureSlash(rootEnc || IMAGE_ROOT || ''),
      page: Math.max(1, parseInt(page,10) || 1),
      pos:  Math.max(0, Math.min(1, +pos || 0)),
      ts:   Date.now()
    };
    localStorage.setItem(RESUME_KEY, JSON.stringify(payload));
  } catch(e){}
}

function takeResumeAfterReload() {
  try {
    const raw = localStorage.getItem(RESUME_KEY);
    if (!raw) return null;
    localStorage.removeItem(RESUME_KEY);
    const o = JSON.parse(raw);
    if (o && typeof o.root === 'string' && Number.isFinite(o.page)) return o;
  } catch(e){}
  return null;
}
// 끝 세그먼트만 뽑아서 길면 …로 줄이는 함수 (URL + 로컬 경로 모두 지원)
function shortenTitle(input, maxLen = 20) {
  const orig = String(input || '');
  try {
    let s = orig;

    // 스킴 제거
    s = s.replace(/^file:\/\//i, '');
    s = s.replace(/^content:\/\//i, '');

    // http(s)라면 도메인 제거
    if (/^https?:\/\//i.test(s)) {
      s = s.replace(/^https?:\/\/[^/]+/i, '');
    }

    // 경로 정규화
    s = s.replace(/\\/g, '/')
         .replace(/[?#].*$/, '')
         .replace(/\/+$/, '');

    const parts = s.split('/').filter(Boolean);
    let last = parts.pop() || orig;

    try { last = decodeURIComponent(last); } catch {}
    last = normalizeTitle(last);

    if (last.length > maxLen) last = last.slice(0, maxLen - 1) + '…';
    return last || orig;
  } catch {
    return orig.length > maxLen ? orig.slice(0, maxLen - 1) + '…' : orig;
  }
}
document.addEventListener('DOMContentLoaded', () => {
  // 서브폴더가 켜져 있으면 "<제목> <번호><접미사>" 로 표시, 아니면 기존 displayTitle 사용
  const effectiveTitle = subfolderExists
    ? `${baseName} ${subfolderNumber}${subfolderSuffix}`  // 예: "피의 흔적 1화"
    : displayTitle;

  document.title = effectiveTitle; // 탭 제목

  const h1 = document.getElementById('bookTitle');
  const hInline = document.getElementById('bookTitleInline');

  if (h1) h1.textContent = effectiveTitle;
  if (hInline) {
    const shortTitle = shortenTitle(effectiveTitle, 20);
    hInline.textContent = shortTitle;
    hInline.title = effectiveTitle; // 전체 경로는 툴팁으로
  }
});
// 표시 최대 글자 수(원하면 숫자만 바꿔 사용)
const WEBTOON_LIST_MAX_LEN = 12;

/* ---------------- 파일명 숫자 자리수 중앙 관리 ---------------- */
/* ---------- 자동 탐지: 파일명 자리수(PAD)와 확장자(IMAGE_EXT) 관리 ---------- */
// 스캔 기록 저장 키(옵션)
// 안전한 전역 가드: 먼저 없으면 만들고, 그 다음 상수로 캡처
if (!('SCANNED_SUBS_KEY' in globalThis)) globalThis.SCANNED_SUBS_KEY = NS('scanned_subfolders_v1');
const SCANNED_SUBS_KEY = globalThis.SCANNED_SUBS_KEY;


// 루트 키 추가
const DETECTED_ROOT_KEY = NS('detected_image_root_v1');
// === 여기 아래에 추가 ===
// === 1) 스키마 키 & 도우미 ===
const IMAGE_CFG_MAP_KEY = NS('image_config_map_v1');

function loadCfgMap(){
  try{
    const raw = localStorage.getItem(IMAGE_CFG_MAP_KEY);
    return raw ? JSON.parse(raw) : {};
  }catch(e){ return {}; }
}
function saveCfgMap(map){
  try{ localStorage.setItem(IMAGE_CFG_MAP_KEY, JSON.stringify(map)); }catch(e){}
}
/** map 키에서 디코딩 경로 뽑기: "[...]" -> "..." */
function decodeMapKeyToPath(k){
  if (!k) return '';
  // 키는 "[디코딩경로]" 형식. 대괄호 제거
  const m = String(k).match(/^\[([\s\S]+)\]$/);
  return m ? m[1] : k;
}
/** 디코딩된 경로 -> 인코딩된 루트 */
function toEncodedRootFromDecodedPath(decodedPath){
  // 각 세그먼트를 안전하게 인코딩하려면 split+map이 좋지만
  // 기존 코드가 encodeURI를 써왔으니 일단 호환 유지
  return ensureSlash(encodeURI(decodedPath));
}
function makeRootKey(root) {
  const r = decodeURIComponent(root || '');
  return `[${r}]`;
}
function getCfgFor(root, prefix = '') {
  const map = loadCfgMap();
  const k = makeRootKey(root);
  const rec = map[k] || null;

  // 단일 레코드 반환 (필요 시 shallow copy)
  return rec ? Object.assign({}, rec) : null;
}
function setCfgFor(root, prefix='', partial){
  const map = loadCfgMap();
  const k = makeRootKey(root);

  const prev = map[k] || {};
  // prefixes는 문자열 하나만 관리(여러 개 필요 없다는 요구에 맞춤)
  const next = cleanObject(Object.assign({}, prev, partial, {
    // prefix를 보관하고 싶으면 여기서 넣어준다
    prefixes: (typeof prefix === 'string') ? prefix : prev.prefixes
  }));

  // 값이 하나도 없으면 통째로 제거, 있으면 저장
  if (Object.keys(next).length === 0) {
    delete map[k];
  } else {
    map[k] = next;
  }
  saveCfgMap(map);
}
function delCfgFor(root, prefix = '', fields) {
  const map = loadCfgMap();
  const k = makeRootKey(root);
  if (!map[k]) return;

  // fields 정규화
  let toDelete = [];
  if (Array.isArray(fields)) {
    toDelete = fields.filter(f => typeof f === 'string' && f);
  } else if (typeof fields === 'string' && fields) {
    toDelete = [fields];
  }

  if (toDelete.length === 0) {
    // 전체 레코드 삭제
    delete map[k];
  } else {
    // 특정 필드만 삭제
    for (const f of toDelete) delete map[k][f];
    // 레코드가 비었으면 키 제거
    if (Object.keys(map[k]).length === 0) delete map[k];
  }

  saveCfgMap(map);
  // ✅ legacy 키 정리 완전 제거 (더 이상 사용하지 않음)
}
function cleanObject(obj){
  const out = {};
  for (const [k,v] of Object.entries(obj || {})) {
    // undefined / null 은 무조건 제외
    if (v === undefined || v === null) continue;
    // 빈 문자열은 prefixes에서만 제외(=저장하지 않음)
    if (k === 'prefixes' && String(v) === '') continue;
    out[k] = v;
  }
  return out;
}
let THUMB_REQ_SEQ = 0;
let FIRST_INDEX = null; // 가장 작은 존재 파일 번호 (예: 0 또는 1)
// ✅ 절대 자기 자신을 참조하지 말 것!
let FILE_PREFIX = '';   // 선언만
loadPrefixFromCfg();
// 실제 사용 루트: 저장된 값 > 없으면 메인 폴더
let IMAGE_ROOT = folder;
/* ---------- 확장자 선택 로직 ---------- */
// 이미 있는 상수와 호환: const IMAGE_EXTS = ['jpg','webp','png'];
// 현재 선택값을 파일/작품 네임스페이스로 저장
const EXT_PREF_KEY = NS('image_ext_pref_v1');
// 후보 확장자 우선순위 (필요에 따라 순서 조정)
const IMAGE_EXTS = [ 'jpg', 'webp', 'png', 'gif', 'jpeg', 'avif'];

// 버튼 활성화 표시
function applyExtUI(activeExt){
  const btns = document.querySelectorAll('#extBox .extBtn');
  btns.forEach(b=>{
    const e = (b.getAttribute('data-ext')||'').toLowerCase();
    b.classList.toggle('active', e === String(activeExt).toLowerCase());
  });
}

// 현재 컨테이너의 모든 이미지 src를 새 확장자로 갱신
// 현재 컨테이너의 모든 이미지 src를 새 확장자로 갱신
function refreshAllImageSrcs(){
  const container = document.getElementById('imgContainer');
  if (!container) return;

  // 세로 모드: page_1, page_2 ... 형식
  container.querySelectorAll('img[id^="page_"]').forEach(img=>{
    const m = img.id.match(/^page_(\d+)$/);
    if (!m) return;
    const p = parseInt(m[1], 10);
    if (!Number.isFinite(p)) return;
    img.src = getImageSrc(p);
  });

  // 가로 layered 모드 호환 (선택)
  container.querySelectorAll('img.layered[data-page]').forEach(img=>{
    const p = parseInt(img.getAttribute('data-page'), 10);
    if (!Number.isFinite(p)) return;
    img.src = getImageSrc(p);
  });
}

// 확장자 변경(저장 + UI + 즉시 반영)
function setImageExt(ext, {reDetect=false} = {}){
  ext = String(ext||'').toLowerCase();
  if (!IMAGE_EXTS.includes(ext)) return;

  // 전역 사용 확장자 변경
  IMAGE_EXT = ext;

  // 저장
  try { localStorage.setItem(EXT_PREF_KEY, ext); } catch(e){}

  // UI 반영
  applyExtUI(ext);

  // 즉시 화면의 이미지들 src 갱신
  refreshAllImageSrcs();


}

// 초기화: 저장된 값 있으면 적용, 없으면 현 IMAGE_EXT로 UI만 반영
document.addEventListener('DOMContentLoaded', ()=>{
  // 버튼에 클릭 핸들러 연결
  document.querySelectorAll('#extBox .extBtn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const ext = btn.getAttribute('data-ext');
      // 확장자 변경 + 재탐지는 기본 off (원하면 true로)
      setImageExt(ext, { reDetect: false });
      showToast?.(`확장자: ${ext.toUpperCase()} 적용`);
    });
  });

  // 저장된 선호 확장자 로드
  let saved = null;
  try { saved = (localStorage.getItem(EXT_PREF_KEY)||'').toLowerCase(); } catch(e){}
  if (saved && IMAGE_EXTS.includes(saved)) {
    // 전역 IMAGE_EXT를 덮어쓰고 UI만 표시 (이미지 갱신도 수행)
    setImageExt(saved, { reDetect: false });
  } else {
    // 저장된 게 없으면 현재 IMAGE_EXT 기준으로 UI 표시만
    applyExtUI(IMAGE_EXT);
  }
});
/* ===== 탐지용 확장자 선택 저장 ===== */
const EXT_PICK_KEY_GLOBAL = 'detect_ext_candidates_global_v1';

function saveDetectExts(exts){
  try { localStorage.setItem(EXT_PICK_KEY_GLOBAL, JSON.stringify(Array.from(exts))); } catch(e){}
}

// 불러오기: 없으면 null (그땐 전체 IMAGE_EXTS 사용)
function loadDetectExts(){
  try {
    const raw = localStorage.getItem(EXT_PICK_KEY_GLOBAL);
    if (!raw) return null;
    const arr = JSON.parse(raw);
    if (Array.isArray(arr)) {
      const lower = new Set(arr.map(s => String(s).toLowerCase()).filter(s => IMAGE_EXTS.includes(s)));
      return lower.size ? lower : null;
    }
  } catch(e){}
  return null;
}

// 현재 유효한 탐지 대상 집합 얻기 (선택이 없으면 전체 기본값 사용)
function getDetectExts(){
  const picked = loadDetectExts();
  return picked ? Array.from(picked) : IMAGE_EXTS.slice();
}

// UI 반영
function applyDetectExtsUI(){
  const picked = new Set(getDetectExts());
  document.querySelectorAll('#extPickBox .extPickBtn').forEach(btn=>{
    const e = (btn.getAttribute('data-ext')||'').toLowerCase();
    btn.classList.toggle('active', picked.has(e));
  });
}
/* ===== [공용] detectPadExt maxScan 저장 ===== */
const MAX_SCAN_KEY_GLOBAL = 'detect_max_scan_global_v1';

function saveDetectMaxScan(n){
  const v = Math.max(0, parseInt(n,10) || 0);
  try { localStorage.setItem(MAX_SCAN_KEY_GLOBAL, String(v)); } catch(e){}
}

function loadDetectMaxScan(){
  try {
    const v = parseInt(localStorage.getItem(MAX_SCAN_KEY_GLOBAL), 10);
    if (Number.isFinite(v) && v >= 0) return v;
  } catch(e){}
  return 1; // 기본값 (기존 디폴트와 동일)
}

function applyScanDepthUI(){
  const v = loadDetectMaxScan();
  document.querySelectorAll('#scanDepthBox .scanBtn').forEach(btn=>{
    const n = parseInt(btn.getAttribute('data-scan'),10);
    btn.classList.toggle('active', n === v);
  });
}
/* ===== [공용] 탐지용 pad(자릿수) 후보 저장 ===== */
const PAD_PICK_KEY_GLOBAL = 'detect_pad_candidates_global_v1';
// 기본 후보(지금 네 하드코딩과 동일한 셋에서 중복/정렬만): 4,3,5,6,2,0
const PAD_DEFAULT_CANDIDATES = [4, 3, 5, 6, 2, 0];

function saveDetectPads(padsSet){
  // 정수화 + 필터 + 정렬(선택) 후 저장
  const arr = Array.from(padsSet)
    .map(v => parseInt(v,10))
    .filter(v => Number.isFinite(v) && v >= 0);
  try { localStorage.setItem(PAD_PICK_KEY_GLOBAL, JSON.stringify(arr)); } catch(e){}
}

function loadDetectPads(){
  try {
    const raw = localStorage.getItem(PAD_PICK_KEY_GLOBAL);
    if (!raw) return null;
    const arr = JSON.parse(raw);
    if (Array.isArray(arr)) {
      const s = new Set(arr.map(v => parseInt(v,10)).filter(v => Number.isFinite(v) && v >= 0));
      return s.size ? s : null;
    }
  } catch(e){}
  return null;
}

// 현재 탐지에 쓸 pad 후보 배열
function getDetectPads(){
  const loaded = loadDetectPads();
  const base = loaded ? Array.from(loaded) : PAD_DEFAULT_CANDIDATES.slice();
  // (선택) 현재 PAD를 맨 앞 우선으로 넣고 중복 제거하고 싶다면:
  // const withCurrentFirst = [PAD, ...base];
  // return Array.from(new Set(withCurrentFirst));
  return Array.from(new Set(base));
}

// UI 반영
function applyPadPickUI(){
  const picked = new Set(getDetectPads());
  document.querySelectorAll('#padPickBox .padPickBtn').forEach(btn=>{
    const n = parseInt(btn.getAttribute('data-pad'), 10);
    btn.classList.toggle('active', picked.has(n));
  });
}


// 보기 모드: 'vertical' | 'horizontal'
let viewMode = 'vertical'; // 기본 세로 모드
// 기본값(하드코딩 자리수/확장자 — 존재하지 않으면 탐지로 대체)
let PAD = 4;
let IMAGE_EXT = 'jpg';
// <-- 여기: const -> let 으로 바꿔서 탐지 후 갱신 가능하게 함
let totalImages = 3229;
// '오리지널' 하드코딩 값을 보관 (스크립트에서 let totalImages 정의 직후에 넣으세요)
const ORIGINAL_TOTAL = (typeof totalImages !== 'undefined' && Number.isFinite(totalImages)) ? totalImages : 0;

// setTotalImages: 한 곳에서 totalImages 갱신 + DOM 업데이트 + (옵션) localStorage 저장
function setTotalImages(n, { persist = false, updateUI = true } = {}) {
  n = Number(n) || 0;
  totalImages = n;

  if (updateUI) {
    try { if (typeof totalPageEl !== 'undefined' && totalPageEl) totalPageEl.textContent = totalImages; } catch(e){}
    try { 
      const pi = document.getElementById('pageInput');
      if (pi) pi.max = totalImages;
    } catch(e){}
  }

  if (persist) {
    try { setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', { total: totalImages }); } catch(e){}
  }
}

// totalImages를 config map(IMAGE_CFG_MAP_KEY)에서 복원
(function loadDetectedTotalFromCfg() {
  try {
    const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '');
    const v = cfg && Number.isFinite(cfg.total) ? cfg.total : NaN;
    if (Number.isFinite(v)) {
      totalImages = v;
      try { if (typeof totalPageEl !== 'undefined' && totalPageEl) totalPageEl.textContent = totalImages; } catch(e){}
      console.info('[init] applied totalImages from IMAGE_CFG_MAP:', totalImages);
    } else {
      totalImages = ORIGINAL_TOTAL;
      try { if (typeof totalPageEl !== 'undefined' && totalPageEl) totalPageEl.textContent = totalImages; } catch(e){}
      console.info('[init] using ORIGINAL_TOTAL:', totalImages);
    }
  } catch (e) {
    console.warn('loadDetectedTotalFromCfg failed', e);
  }
})();

const batchSize = 5;

function loadPrefixFromCfg(rootHint) {
  try {
    // 우선순위: 현재 IMAGE_ROOT → 폴백 folder
    const roots = [ensureSlash(rootHint || IMAGE_ROOT || ''), ensureSlash(folder || '')]
      .filter(Boolean);
    for (const r of roots) {
      const c = getCfgFor(r, '') || {};
      const pfx = sanitizePrefix(c.prefixes || '');
      if (pfx) {
        FILE_PREFIX = pfx;
        return FILE_PREFIX;
      }
    }
  } catch(e){}
  FILE_PREFIX = '';
  return FILE_PREFIX;
}

function savePrefixToCfg(rootHint, prefix) {
  try {
    const r = ensureSlash(rootHint || IMAGE_ROOT || folder || '');
    // setCfgFor는 partial 병합 + cleanObject 수행
    setCfgFor(r, prefix || '', { prefixes: sanitizePrefix(prefix) });
  } catch(e){}
}

// ✅ 여기 블록에 모아서 선언 (처음 참조되기 전에)
const FAVORITES_VERSION   = 2; // 필요할 때 숫자만 올리기
const FAVORITES_KEY       = NS(`fav_v${FAVORITES_VERSION}`);
const FAVORITES_SORT_KEY  = `fav_sort_v${FAVORITES_VERSION}`;
const FAVORITES_VIEW_KEY  = `fav_view_v${FAVORITES_VERSION}`;


const sanitizePrefix = (s) => String(s || '').trim();


// ✅ 접두어를 가장 먼저 로드 (getImageSrc, detectPadExt, 로더들 보다 위!)
loadPrefixFromCfg();

const THUMB_SIZE_KEY = 'fav_thumb';
let thumbW = 50;  // 초기값
let thumbH = 100; // 초기값
// ==== 즐겨찾기 박스 크기 상태 & 저장 키 ====
const FAVBOX_SIZE_KEY = 'favbox';
// ===== 목록 박스(웹툰 리스트) 세로 높이 관리 =====
const WTBOX_SIZE_KEY = 'wtbox_h_v1';
let wtBoxH = 100; // 기본값
let favBoxW = 400;  // 초기 가로(px)
let favBoxH = 300;  // 초기 세로(px)
// ==== 버튼 핸들러 ====
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));

const STEP_W = 5;    // 가로 증감 단위(px)
const STEP_H = 10;   // 세로 증감 단위(px)
const MIN_W  = 20,  MAX_W  = 1920;
const MIN_H  = 20,  MAX_H  = 1080;

const STEP_FW = 20;  // 가로 증감 단위(px)
const STEP_FH = 50;  // 세로 증감 단위(px)
const MIN_FW  = 240, MAX_FW  = 1920;   // 가로 범위
const MIN_FH  = 50, MAX_FH  = 1920;  // 세로 범위

// 패딩 함수: 어디서나 padN(n) 쓰세요
function padN(n) {
  return String(n).padStart(PAD, '0');
}

// 이미지 파일명 패턴을 동적으로 생성 (PAD 변수가 이미 선언되어 있다고 가정)
const IMAGE_EXT_PATTERN = IMAGE_EXTS.join('|'); // "jpg|webp|png"

// 특수문자 이스케이프
function escRe(s){return String(s).replace(/[.*+?^${}()|[\]\\]/g,'\\$&');}

let IMAGE_FILENAME_REGEX, IMAGE_FILENAME_JPG_REGEX;
function rebuildFilenameRegex(){
  const pre = FILE_PREFIX ? `(?:${escRe(FILE_PREFIX)})?` : ''; // 접두어는 있거나 없거나
  IMAGE_FILENAME_REGEX     = new RegExp(`${pre}(\\d{${PAD}})\\.(${IMAGE_EXT_PATTERN})(?:[\\?#]|$)`, 'i');
  IMAGE_FILENAME_JPG_REGEX = new RegExp(`${pre}(\\d{${PAD}})\\.${IMAGE_EXT}(?:[\\?#]|$)`, 'i');
}
// 최초 1회 빌드
rebuildFilenameRegex();

const getBaseIndex = () => (Number.isFinite(FIRST_INDEX) ? FIRST_INDEX : 1);

function fileNoFromPage(page){              // UI페이지 → 파일번호
  return getBaseIndex() + (page - 1);
}
function pageFromFileNo(n){                 // 파일번호 → UI페이지
  return (n - getBaseIndex()) + 1;
}
// helper: 이미지 src 를 반환 (기본 확장자 사용)
// page : 숫자
// 이미지 src 반환 (getImageSrc 한 곳만 사용)
function getImageSrc(page, ext = IMAGE_EXT) {
  const n = fileNoFromPage(page);                      // ★ 핵심
  const numStr = (PAD > 0) ? String(n).padStart(PAD, '0') : String(n);
  return `${IMAGE_ROOT}${FILE_PREFIX}${numStr}.${ext}`;
}
// 저장된 PAD/EXT ROOT불러오기 (초기화시 적용)
(function loadDetectedPadExt() {
  try {
    // 1) 우선 후보 루트들을 준비 (중복/빈값 제거)
    const uniq = (arr) => Array.from(new Set(arr.filter(Boolean).map(s => ensureSlash(s))));
    const rootsToTry = uniq([
      typeof IMAGE_ROOT === 'string' && IMAGE_ROOT,         // 현재 값
      typeof folder === 'string' && folder,                 // 메인 폴더
      typeof IMAGE_ROOT === 'string' && buildSubfolderRoot(IMAGE_ROOT), // 현재값 기준 서브
      typeof folder === 'string' && buildSubfolderRoot(folder)          // 메인 기준 서브
    ]);

    // 2) 어떤 루트에 저장돼 있는지 먼저 찾아서 집어온다
    let picked = null;
    for (const r of rootsToTry) {
      const c = getCfgFor(r, FILE_PREFIX || '') || null;
      if (c && (Number.isFinite(c.total) || Number.isFinite(c.pad) || (typeof c.ext === 'string' && c.ext))) {
        picked = { root: r, cfg: c };
        break;
      }
    }
    const cfg = picked ? picked.cfg : (getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {});

    // 3) PAD/EXT/FIRST/ROOT 반영
    if (Number.isFinite(cfg.pad) && cfg.pad >= 0) PAD = cfg.pad;
    if (cfg && typeof cfg.ext === 'string' && cfg.ext) IMAGE_EXT = cfg.ext;

    // cfg.root가 있으면 그걸, 없으면 picked.root를 IMAGE_ROOT로 확정
    if (cfg && typeof cfg.root === 'string' && cfg.root.trim()) {
      IMAGE_ROOT = ensureSlash(cfg.root.trim());
    } else if (picked && picked.root) {
      IMAGE_ROOT = ensureSlash(picked.root);
    } else {
      // 아무것도 못 찾으면 기존 값 유지
      IMAGE_ROOT = ensureSlash(IMAGE_ROOT || folder);
    }

    FIRST_INDEX = null;
    if (Number.isFinite(cfg.first)) FIRST_INDEX = cfg.first;
    else if (Number.isFinite(cfg.base)) FIRST_INDEX = cfg.base; // 구버전 호환

    if (Number.isFinite(cfg.total)) {
      setTotalImages(cfg.total, { persist: false, updateUI: true });
    }
loadPrefixFromCfg(IMAGE_ROOT);
    rebuildFilenameRegex?.();

    console.info('[init] PAD, EXT, ROOT loaded:', { PAD, IMAGE_EXT, IMAGE_ROOT, FIRST_INDEX });
  } catch (e) {
    // ignore
  }
})();

// PAD/EXT/ROOT 영구 저장 함수
function saveDetectedPadExt(pad, ext, root = null, first = undefined) {
  try {
    const partial = {};
    if (Number.isFinite(pad)) partial.pad = pad;
    if (ext) partial.ext = String(ext);
    if (Object.keys(partial).length) setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', partial);
    console.info('[saveDetectedPadExt] saved pad/ext/root:', pad, ext, root);
  } catch(e) {}
}

// 탐지 함수: start 인덱스 기준으로 빠르게 (비동기)
// detectPadExt: "가장 작은 번호"를 찾도록 재작성
async function detectPadExt(opts = {}) {
  const {
  timeout = 3000,
  delay = 50,
  verbose = true,
  urlTemplate = null,
  trySubfolderOnFail = true   //  추가: 실패 시 서브폴더 재시도
} = opts;
  // 호출자가 명시한 값이 있으면 그걸 쓰고, 아니면 전역값 사용
  const maxScan = Number.isFinite(opts.maxScan) ? opts.maxScan : loadDetectMaxScan();
  if (verbose) console.log('[detectPadExt] start (n-first scan):', { maxScan, timeout, delay });

  // 1) 캐시 히트면 빠르게 리턴 (ROOT까지 복원)
  try {
    const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
    const storedPad  = Number.isFinite(cfg.pad) ? cfg.pad : NaN;
    const storedExt  = (cfg && typeof cfg.ext  === 'string') ? cfg.ext  : null;
    const storedRoot = (typeof cfg.root === 'string' && cfg.root) ? ensureSlash(cfg.root) : null;
	const storedFirst = Number.isFinite(cfg.first) ? cfg.first : null;  // ✅ 누락 보정
	loadPrefixFromCfg(IMAGE_ROOT);

    if (Number.isFinite(storedPad) && storedExt) {
      PAD = storedPad;
      IMAGE_EXT = storedExt;
      IMAGE_ROOT = storedRoot || ensureSlash(IMAGE_ROOT || folder);
	  if (storedFirst !== null) FIRST_INDEX = storedFirst;

      rebuildFilenameRegex?.();
      verbose && console.log('[detectPadExt] loaded from map:', { PAD, IMAGE_EXT, IMAGE_ROOT, FIRST_INDEX });
      return { pad: PAD, ext: IMAGE_EXT, root: IMAGE_ROOT, firstIndex: FIRST_INDEX, fromStorage: true, sampleIndex: FIRST_INDEX ?? 0 };
    }
  } catch(e){ /* ignore */ }

  // 2) helper: 이미지 존재 검사
  const checkUrl = (url) => new Promise(resolve => {
    const img = new Image();
    let done = false;
    const to = setTimeout(() => { if (!done) { done = true; try { img.src=''; } catch{}; resolve(false); } }, timeout);
    img.onload = () => { if (!done) { done = true; clearTimeout(to); resolve(true); } };
    img.onerror = () => { if (!done) { done = true; clearTimeout(to); resolve(false); } };
    try { img.referrerPolicy = 'no-referrer'; } catch(e){}
    img.src = url;
  });

  // 3) pad 후보
  // 선택된 pad 후보(없으면 기본값 사용)
  const padCandidates = getDetectPads();
  verbose && console.log('[detectPadExt] padCandidates:', padCandidates, 'IMAGE_EXTS:', IMAGE_EXTS);

  // 3.5) 루트 후보(메인 → 서브폴더) 준비
  const mainRoot = ensureSlash((typeof IMAGE_ROOT === 'string' && IMAGE_ROOT) ? IMAGE_ROOT : folder);
  const rootsToTry = [mainRoot];
  if (trySubfolderOnFail) {
    rootsToTry.push(buildSubfolderRoot(mainRoot)); // 메인 못 찾으면 이걸로 재시도
  }
  const extsToTry = getDetectExts();
  // 4) 루트 후보마다 스캔 시도
  for (const rootCandidate of rootsToTry) {
    verbose && console.log('[detectPadExt] trying root:', rootCandidate);

    // 4-1) n 우선 루프
    for (let n = 0; n <= maxScan; n++) {
      verbose && console.log(`[detectPadExt] scanning n=${n}`);

      for (const pad of padCandidates) {
        for (const ext of extsToTry) {

          // 치환 값 준비
          const prefix = FILE_PREFIX || '';
          const rawN   = String(n);
          const padN   = (pad > 0) ? rawN.padStart(pad, '0') : rawN;

          // URL 만들기 (템플릿 우선)
          let url;
          if (urlTemplate) {
            url = urlTemplate
              .replaceAll('{root}',   rootCandidate)
              .replaceAll('{prefix}', prefix)
              .replaceAll('{padn}',   padN)
              .replaceAll('{n}',      rawN)
              .replaceAll('{ext}',    ext);
          } else {
            url = `${rootCandidate}${prefix}${padN}.${ext}`;
          }

          verbose && console.log(`  try pad=${pad} ext=${ext} -> ${url}`);

          try {
            const ok = await checkUrl(url);
            verbose && console.log(`    -> ${ok ? 'FOUND' : 'no'}`);
            if (ok) {
              // 발견: 상태 확정 + 저장 (여기서 rootCandidate를 실제 ROOT로 채택)
              PAD = pad;
              IMAGE_EXT = ext;
              IMAGE_ROOT = rootCandidate;
			  // first index 저장
			  FIRST_INDEX = n;
			  // 맵에 한 번만 저장 (pad/ext/first/root 모두)
              setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', {
                pad: PAD,
                ext: IMAGE_EXT,
                first: FIRST_INDEX,
              });
              rebuildFilenameRegex?.();

              console.log('[detectPadExt] DETECTED firstIndex =>', {
                pad: PAD, ext: IMAGE_EXT, firstIndex: n, url
              });

              return { pad: PAD, ext: IMAGE_EXT, fromStorage: false, sampleIndex: n, url };
            }
          } catch (err) {
            verbose && console.warn('[detectPadExt] check error', err);
          }

          await new Promise(r => setTimeout(r, delay));
        }
      }
    }

    // 이 루트에서 못 찾았으면 다음 루트(=서브폴더)로 넘어감
    verbose && console.log('[detectPadExt] not found on this root, moving to next...');
  }

  // 전부 실패
  verbose && console.warn('[detectPadExt] NOT DETECTED within n<=', maxScan, 'for all roots; keeping defaults', { PAD, IMAGE_EXT });
  return { pad: PAD, ext: IMAGE_EXT, root: ensureSlash((typeof IMAGE_ROOT === 'string' && IMAGE_ROOT) ? IMAGE_ROOT : folder), fromStorage: false, sampleIndex: null };
}
// clearDetectedBtn 핸들러가 호출되면 PAD/EXT 키도 삭제하도록 도우미


// 하나의 서브폴더(예: 12화)를 스캔하고 pad/ext/first/total을 저장
async function scanOneSubfolder(num, {
  mainRoot   = ensureSlash(folder),
  startProbe = 1000,
  timeout    = 4000,
  delay      = 150,
  maxIndex   = 2_000_000,
  verbose    = true
} = {}) {
  const targetRoot = buildSubfolderRootFor(mainRoot, num);

  // 현재 전역 상태 백업
  const prev = {
    PAD, IMAGE_EXT, IMAGE_ROOT, FIRST_INDEX,
    totalImages, FILE_PREFIX
  };

  // 이 서브폴더 컨텍스트로 전역 전환
  IMAGE_ROOT = targetRoot;
  loadPrefixFromCfg(IMAGE_ROOT); // 접두어 동기화
  // UI 갱신/새로고침 억제
  SUPPRESS_AUTO_RELOAD = true;

  let ok = false, det = null, last = null, first = null;

  try {
    // pad/ext/first 탐지 (이 서브폴더만)
    det = await detectPadExt({
      
      timeout,
      delay,
      verbose,
      trySubfolderOnFail: false // 이미 정확한 서브폴더를 지정했으므로 불필요
    });

    const detectedOk = det && (det.fromStorage === true || Number.isFinite(det.sampleIndex));
    if (!detectedOk) {
      if (verbose) console.warn(`[scanOneSubfolder] ${num}화: pad/ext 탐지 실패`);
      return { success:false, num, reason:'detect_failed' };
    }

    // 전역 최신화 (detectPadExt가 이미 전역을 세팅하지만 안전차)
    if (Number.isFinite(det.pad)) PAD = det.pad;
    if (det.ext) IMAGE_EXT = det.ext;
    if (Number.isFinite(det.sampleIndex)) FIRST_INDEX = det.sampleIndex;
    first = FIRST_INDEX ?? 0;

    // 마지막 장 번호 찾기 (UI 갱신/새로고침 없이)
    const res = await findLastImageIndex({
      start: startProbe,
      timeout,
      delay,
      maxIndex,
      verbose,
      updateUI: false
    });
    last = Number.isFinite(res.lastIndex) ? res.lastIndex : null;

    if (!last || last <= 0) {
      if (verbose) console.warn(`[scanOneSubfolder] ${num}화: lastIndex 없음`);
      return { success:false, num, reason:'no_last' };
    }

    // 이 서브폴더의 pad/ext/first/total을 **그 서브폴더 루트에다** 저장
    setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', {
      pad: PAD,
      ext: IMAGE_EXT,
      first: first,
      total: last,
    });

    
    ok = true;
    if (verbose) console.log(`[scanOneSubfolder] ✅ ${num}화 저장 완료`, { root: IMAGE_ROOT, PAD, IMAGE_EXT, first, total:last });
    return { success:true, num, pad:PAD, ext:IMAGE_EXT, first, total:last, root: IMAGE_ROOT };

  } finally {
    // 전역 상태/플래그 복원
    SUPPRESS_AUTO_RELOAD = false;
    IMAGE_ROOT  = prev.IMAGE_ROOT;
    PAD         = prev.PAD;
    IMAGE_EXT   = prev.IMAGE_EXT;
    FIRST_INDEX = prev.FIRST_INDEX;
    setTotalImages(prev.totalImages, { persist:false, updateUI:false });
    rebuildFilenameRegex?.();
  }
}

// 여러 회차를 자동 스캔: 예) 1화부터 200화까지, 연속으로 빈 폴더 3개 나오면 중지
async function scanAllSubfolders({
  startNum = 1,
  maxNum   = 200,       // 최대 시도 회차
  stopOnMissStreak = 3, // 연속 실패 N회면 조기 종료
  startProbe = 1000,
  timeout = 4000,
  delay = 120,
  maxIndex = 2_000_000,
  verbose = true,
  updateUIBanner = true,
  reloadOnDone = false
} = {}) {

  const missLimit = Math.max(1, stopOnMissStreak);
  let misses = 0;
  const found = [];

  // 진행 배너
  const show = (msg) => {
    if (!updateUIBanner) return;
    try {
      if (loadingIndicator) {
        loadingIndicator.style.display = 'block';
        loadingIndicator.textContent = msg;
      }
    } catch(e){}
  };
  const hide = () => {
    if (!updateUIBanner) return;
    try { if (loadingIndicator) loadingIndicator.style.display = 'none'; } catch(e){}
  };

  show(`서브폴더 스캔 시작… (from ${startNum})`);

  for (let n = startNum; n < startNum + maxNum; n++) {
    show(`검사 중: ${n}화… (연속실패 ${misses}/${missLimit})`);

    const r = await scanOneSubfolder(n, {
      startProbe, timeout, delay, maxIndex, verbose
    });

    if (r.success) {
      misses = 0;
      found.push(r);
      show(`✅ 저장됨: ${n}화 (총 ${r.total}장)`);
    } else {
      misses++;
      if (verbose) console.log(`[scanAllSubfolders] ${n}화 실패: ${r.reason || 'unknown'}`);
      if (misses >= missLimit) {
        show(`연속 실패 ${misses}회 → 종료`);
        break;
      }
    }
  }

  hide();

  // 요약 알림
  try {
    alert(`스캔 완료\n성공: ${found.length}개\n${found.map(f => `${f.num}화(${f.total}장)`).join(', ') || '(없음)'}`);
  } catch(e){}
 // ✅ 옵션이 켜져 있으면 여기서 한 번만 새로고침
 if (reloadOnDone && found.length > 0) {
   setTimeout(() => { window.location.reload(); }, 150);
 }
  return found;
}


function clearDetectedPadExtFromStorage() {
  try {
    delCfgFor(IMAGE_ROOT, FILE_PREFIX || ''); // pad/first/total 등이 들어있음
    console.info('[clearDetectedPadExtFromStorage] removed map(cfg) & root key');
  } catch(e){}
}
let _pendingPos = null; // { page, pos, applied?: boolean }
let loaded = 0; // 현재까지 로드된 마지막 페이지 번호
const container = document.getElementById("imgContainer");
const loadingIndicator = document.getElementById("loading");

const totalPageEl = document.getElementById("totalPage");
const pageInput   = document.getElementById("pageInput");
const jumpBtn     = document.getElementById("jumpBtn");
totalPageEl.textContent = totalImages;


// ✅ 줌 상태
const baseWidth = 600;       // 기준 폭(px) — CSS 기본값과 일치
let zoom = 1.0;              // 1.0 = 100%
const zoomLevelEl = document.getElementById('zoomLevel');
function applyZoom() {
  const px = Math.round(baseWidth * zoom);
  document.documentElement.style.setProperty('--img-w', px + 'px');
  zoomLevelEl.textContent = `(${Math.round(zoom * 600)}px)`;
}
function zoomIn()  { zoom = Math.min(3.0, +(zoom + 0.10).toFixed(2)); applyZoom(); }   // 최대 300%
function zoomOut() { zoom = Math.max(0.2, +(zoom - 0.10).toFixed(2)); applyZoom(); }   // 최소 20%
function zoomReset(){
  clearHorizontalFit();        // ← 맞춤 해제
  zoom = 1.0;
  applyZoom();
}
function zoomReal(){
	if (viewMode === 'horizontal') {
    // 상단 UI 여백을 빼고 싶으면 값만 바꿔줘 (예: 80)
    const offset = 0;

    // 1) CSS 규칙 주입/갱신
    ensureViewportCoverStyles(0);

    // 2) 컨테이너에 클래스로 모드 적용
    container.classList.add('vcover');

    // 3) layered 스왑 사용 중이면 겹침 이미지에도 동일 규칙 적용됨(위 CSS가 처리)
    //    layered 안 쓴다면 그냥 일반 img에도 규칙이 적용됨

    // 4) 표시 문구(원하면)
    zoomLevelEl.textContent = `(세로맞춤)`;

    return; // 가로모드는 여기서 끝
  }
  const firstImg = container.querySelector('img');
  if (!firstImg || !firstImg.complete) {
    alert("이미지가 아직 로드되지 않았어요.");
    return;
  }
  const natural = firstImg.naturalWidth;
  if (natural > 0) {
    zoom = natural / baseWidth; // 실제폭 ÷ 기준폭
    applyZoom();
  } else {
    alert("이미지 크기를 불러올 수 없습니다.");
  }
}

function zoomFit(){
  if (viewMode === 'horizontal') {
    // 상단 UI 여백을 빼고 싶으면 값만 바꿔줘 (예: 80)
    const offset = 0;

    // 1) CSS 규칙 주입/갱신
    ensureHorizontalFitStyles(offset);

    // 2) 컨테이너에 클래스로 모드 적용
    container.classList.add('hfit-by-height');

    // 3) layered 스왑 사용 중이면 겹침 이미지에도 동일 규칙 적용됨(위 CSS가 처리)
    //    layered 안 쓴다면 그냥 일반 img에도 규칙이 적용됨

    // 4) 표시 문구(원하면)
    zoomLevelEl.textContent = `(세로맞춤)`;

    return; // 가로모드는 여기서 끝
  }
  // 기존 가로(너비) 기준 맞춤
  const sidePadding = 32;
  const vw = Math.max(200, window.innerWidth - sidePadding);
  const z = Math.max(0.2, Math.min(3.0, vw / baseWidth));
  const px = Math.round(baseWidth * z);
  document.documentElement.style.setProperty('--img-w', px + 'px');
  zoomLevelEl.textContent = `(${px}px)`;
}
function clearHorizontalFit(){
  container.classList.remove('hfit-by-height'); // 특수 클래스 제거
  container.classList.remove('vcover'); // 특수 클래스 제거
  // 필요하면 전역 폭 변수도 복원
  document.documentElement.style.setProperty('--img-w', Math.round(baseWidth * zoom) + 'px');
  zoomLevelEl.textContent = `(${Math.round(baseWidth * zoom)}px)`;
}
// 가로모드에서 "세로 꽉 차기"를 강제하는 CSS를 동적으로 주입
function ensureHorizontalFitStyles(offsetPx = 0) {
  const id = 'hfit-style';
  const old = document.getElementById(id);
  const css = `
  /* zoomFit(가로모드) 시 적용되는 특수 클래스 */
  #imgContainer.hmode.hfit-by-height img{
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - ${offsetPx}px) !important;
    max-width: 100vw !important;
    object-fit: contain; /* 여유 */
  }
  #imgContainer.hmode.hfit-by-height img.layered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto !important;
    height: calc(100vh - ${offsetPx}px) !important;
    max-height: calc(100vh - ${offsetPx}px) !important;
    max-width: 100vw !important;
    object-fit: contain;
  }`;
  if (old) {
    old.textContent = css;
  } else {
    const tag = document.createElement('style');
    tag.id = id;
    tag.textContent = css;
    document.head.appendChild(tag);
  }
}

// ✅ 뷰포트 가득 채우기(cover) 스타일 주입 - 문법 수정 버전
function ensureViewportCoverStyles(offsetPx = 0) {
  const id = 'vcover-style';
  const old = document.getElementById(id);
  const css = `
  /* 가로모드에서 뷰포트 꽉 채우기(cover 성향 주려면 object-fit:cover 추가) */
  #imgContainer.hmode.vcover img{
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - ${offsetPx}px) !important;
    max-width: 100vw !important;
    /* object-fit: cover;  // 진짜 '꽉 채우기' 원하면 주석 해제 */
  }
  #imgContainer.hmode.vcover {
    position: relative;
    display: block;
    min-height: calc(100vh - ${offsetPx}px);
    z-index: 1;
  }
  /* layered 스왑용 이미지도 동일 규칙 + 중앙 정렬 */
  #imgContainer.hmode.vcover img.layered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto !important;
    height: calc(100vh - ${offsetPx}px) !important;
    max-height: calc(100vh - ${offsetPx}px) !important;
    max-width: 100vw !important;
    visibility: hidden;
    /* object-fit: cover;  // 위와 동일 */
  }`;
  if (old) {
    old.textContent = css;
  } else {
    const tag = document.createElement('style');
    tag.id = id;
    tag.textContent = css;
    document.head.appendChild(tag);
  }
}
// 버튼 핸들러 바인딩
document.getElementById('zoomIn').addEventListener('click', zoomIn);
document.getElementById('zoomOut').addEventListener('click', zoomOut);
document.getElementById('zoomReset').addEventListener('click', zoomReset);
document.getElementById('zoomFit').addEventListener('click', zoomFit);
document.getElementById('zoomReal').addEventListener('click', zoomReal);


// 5장씩 로드
function loadNextBatch() {
  if (loaded >= totalImages) {
    // 마지막까지 다 읽었으면 다음 서브폴더 시도
    // (여러 번 트리거 방지: guard 내부에서 처리)
    tryAdvanceToNextSubfolder();
    return;
  }
  loadingIndicator.style.display = "block";

  const next = Math.min(loaded + batchSize, totalImages);
  const frag = document.createDocumentFragment();
  for (let i = loaded + 1; i <= next; i++) {
    
    const img = document.createElement("img");
    img.id  = `page_${i}`;                          // 식별용
    img.src = getImageSrc(i);                // 0001.jpg ...
    img.loading = "lazy";
    frag.appendChild(img);
  }
  container.appendChild(frag);
  loaded = next;

  setTimeout(() => { loadingIndicator.style.display = "none"; }, 600);
}

let _viewersReady = false;
let _visibleIdx = 0;         // 0 또는 1
let _pageLoadToken = 0;      // 레이스 방지 토큰

function ensureHorizontalViewers() {
  if (_viewersReady) return;
  // 컨테이너 비우지 않습니다! (세로 잔여는 이미 정리했다고 했으니 패스)
  // 가로모드에서만 쓸 viewer 0/1 두 장 생성
  const v0 = document.createElement('img');
  const v1 = document.createElement('img');
  v0.className = 'viewer';
  v1.className = 'viewer hidden'; // 시작은 0만 보이게

  v0.decoding = 'async';
  v1.decoding = 'async';

  // 성능/품질 옵션 (선택)
  v0.loading = 'eager';
  v1.loading = 'eager';
  try { v0.referrerPolicy = v1.referrerPolicy = 'no-referrer'; } catch(e){}

  // 아이디는 선택
  v0.id = 'viewer0';
  v1.id = 'viewer1';

  container.appendChild(v0);
  container.appendChild(v1);

  _viewersReady = true;
}
// 유틸: 이미지 미리 로드 후 <img> 반환
function preloadImage(url){
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.decoding = 'async';
    img.onload  = () => resolve(img);
    img.onerror = () => reject(new Error('image load failed: ' + url));
    try { img.referrerPolicy = 'no-referrer'; } catch(e){}
    img.src = url;
  });
}


// 가로 모드: 현재 페이지 한 장만, 로딩/에러 처리 포함
async function showHorizontalPage(p){
  p = Math.max(1, Math.min(totalImages, parseInt(p,10)||1));
  setCurrentPage(p, { updateInput: true });

  if (loadingIndicator){
    loadingIndicator.style.display = 'block';
    loadingIndicator.textContent = `불러오는 중... (${p}/${totalImages})`;
  }

  const url = getImageSrc(p);

  try {
    const img = await preloadImage(url);
    img.id = `page_${p}`;
    img.classList.add('layered');   // ← 겹치기용 클래스
    img.style.zIndex = String(Date.now()); // 새로 온 게 위로
    img.style.visibility = 'hidden'; // 로드 직후 잠깐 숨김(정렬/리플로우 끝나면 보이기)

    container.appendChild(img);

    // 이전 것들은 아래에 둔 채, 새 것만 켜기
    requestAnimationFrame(() => {
      img.style.visibility = 'visible';  // 깜빡임 최소화

      // 선택사항: 바로 전 이미지만 보이고 그 전 이미지들은 가려두기
      // (진짜 '겹쳐 보이기'가 목적이면 이 블록은 지워도 됨)
      const imgs = container.querySelectorAll('img.layered');
      if (imgs.length >= 3) {
        // 맨 위(최근) 2장만 보이고 나머지는 안 보이게
        for (let i = 0; i < imgs.length - 2; i++) {
          imgs[i].style.visibility = 'hidden';
        }
      }
    });

  } catch(err){
    console.warn('[hmode] load error', err);
    container.innerHTML = `
      <div style="padding:16px;color:#fff;background:rgba(0,0,0,.5);border-radius:8px;">
        이미지를 불러오지 못했습니다.<br>
        <small>${url}</small>
      </div>`;
  } finally {
    if (loadingIndicator){
      loadingIndicator.style.display = 'none';
      loadingIndicator.textContent = '';
    }
  }
}

// sentinel이 보일 때 다음 배치
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      if (loaded >= totalImages) {
        tryAdvanceToNextSubfolder(); // 끝이면 이어가기
        // 다음 회차로 넘어가면 새 sentinel이 다시 observe되므로 여기서 disconnect는 생략
      } else {
        loadNextBatch();
      }
    }
  });
});
observer.observe(document.getElementById("sentinel"));

// ✅ 페이지 점프: 이전 페이지들 로드하지 않고, 해당 페이지를 맨 위로
function jumpToPage() {
  // 1) 입력값 파싱 + 클램프
  let page = parseInt(pageInput.value, 10);
  if (!Number.isFinite(page) || page < 1) page = 1;
  if (typeof totalImages === 'number' && page > totalImages) page = totalImages;

  // 2) 현재 페이지 UI 일괄 갱신
  setCurrentPage(page, { updateInput: true });

  // === 가로/세로 분기 ===
  if (typeof viewMode !== 'undefined' && viewMode === 'horizontal') {
    // 가로 모드: 한 장만 로드
    // 세로용 상태/스크롤 리셋은 불필요
    if (typeof showHorizontalPage === 'function') {
      showHorizontalPage(page); // 내부에서 로딩표시/에러 처리까지 함
    } else {
      // 안전장치: 함수가 없다면 최소한 한 장만 띄우기
      container.innerHTML = '';
      const img = document.createElement('img');
      img.id = `page_${page}`;
      img.src = getImageSrc(page);
      img.loading = 'eager';
      container.appendChild(img);
    }
    return; // 가로 모드 끝
  }

  // 세로 모드: 기존 동작 유지
  container.innerHTML = "";
  loaded = Math.max(0, page - 1);
  window.scrollTo({ top: 0, behavior: 'auto' });
  loadNextBatch();
  // (선택) 페이지 표시값 보정
  if (currentPageEl) currentPageEl.textContent = String(page);
}

jumpBtn.addEventListener('click', jumpToPage);
pageInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') jumpToPage();
});

// 초기 첫 5장 + 초기 줌 적용
loadNextBatch();
applyZoom();

// (옵션) 키보드 단축키: + / - / 0 / f
document.addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT') return; // 입력 중일 때 무시
  if (e.key === '+') zoomIn();
  else if (e.key === '-') zoomOut();
  else if (e.key === '0') zoomReset();
  else if (e.key.toLowerCase() === 'f') zoomFit();
});
// ✅ 흑백 토글
const filterBtn = document.getElementById('filterBWBtn');
let bwEnabled = false;

function applyBW() {
  document.documentElement.style.setProperty(
    '--img-filter',
    bwEnabled ? 'grayscale(100%)' : 'none'
  );
  filterBtn.textContent = bwEnabled ? '흑백' : '흑백';
  setBtnPressed(filterBtn, bwEnabled);            // 🔹 활성 표시
}

filterBtn.addEventListener('click', () => {
  bwEnabled = !bwEnabled;
  applyBW();
});

// (선택) 단축키: g 키로 토글 (입력 중엔 무시)
document.addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  if (e.key.toLowerCase() === 'g') {
    bwEnabled = !bwEnabled;
    applyBW();
  }
});

// 초기 적용(기본 OFF)
applyBW();

// ✅ 배경색 변경 기능
const bgButtons = document.querySelectorAll('.bgBtn');
bgButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const color = btn.dataset.color;
    const body = document.body;

    if (color === 'default') {
      // 기본: 원래 배경 이미지 복원
      body.style.background = 'url("background4.jpg") repeat';
      body.style.backgroundAttachment = 'fixed';
      body.style.backgroundSize = 'cover';
    } else {
      // 단색 배경으로 교체
      let bgColor;
      switch (color) {
        case 'black': bgColor = '#000'; break;
        case 'sky': bgColor = '#cce7ff'; break;     // 연하늘
        case 'pink': bgColor = '#ffd6e7'; break;    // 연분홍
        case 'salmon': bgColor = '#ffdab9'; break;  // 살구
      }
      body.style.background = bgColor;
      body.style.backgroundAttachment = 'scroll';
      body.style.backgroundSize = 'auto';
    }
  });
});

document.addEventListener('DOMContentLoaded', ()=>{
  // 초기 UI
  applyPadPickUI();

  // 토글 클릭
  document.querySelectorAll('#padPickBox .padPickBtn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const n = parseInt(btn.getAttribute('data-pad'), 10);
      if (!Number.isFinite(n) || n < 0) return;
      const cur = new Set(getDetectPads());
      if (cur.has(n)) cur.delete(n); else cur.add(n);
      if (cur.size === 0) { showToast?.('최소 1개 이상 선택하세요'); return; }
      saveDetectPads(cur);
      applyPadPickUI();
    });
  });

  // 전체/해제
  document.getElementById('padPickAll')?.addEventListener('click', ()=>{
    saveDetectPads(new Set(PAD_DEFAULT_CANDIDATES));
    applyPadPickUI();
  });
  document.getElementById('padPickNone')?.addEventListener('click', ()=>{
    showToast?.('최소 1개는 선택해야 합니다');
  });
});
document.addEventListener('DOMContentLoaded', ()=>{
  // 초기 UI 반영
  applyScanDepthUI();

  // 클릭 → 저장 → UI 갱신
  document.querySelectorAll('#scanDepthBox .scanBtn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const n = parseInt(btn.getAttribute('data-scan'),10);
      if (!Number.isFinite(n) || n < 0) return;
      saveDetectMaxScan(n);
      applyScanDepthUI();
      showToast?.(`탐지 깊이: n=${n}`);
    });
  });
});
document.addEventListener('DOMContentLoaded', ()=>{

  // 초기 UI
  applyDetectExtsUI();

  // 토글 클릭
  document.querySelectorAll('#extPickBox .extPickBtn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const ext = (btn.getAttribute('data-ext')||'').toLowerCase();
      const current = new Set(getDetectExts());
      if (current.has(ext)) current.delete(ext); else current.add(ext);

      if (current.size === 0) {
        showToast?.('최소 1개 이상 선택하세요');
        return;
      }
      saveDetectExts(current);
      applyDetectExtsUI();
    });
  });

  // 전체/해제
  document.getElementById('extPickAll')?.addEventListener('click', ()=>{
    saveDetectExts(new Set(IMAGE_EXTS));
    applyDetectExtsUI();
  });
  document.getElementById('extPickNone')?.addEventListener('click', ()=>{
    showToast?.('최소 1개는 선택해야 합니다');
  });
});

/* ===== 즐겨찾기 보기 모드 (썸네일 / 텍스트) ===== */

let favViewMode = 'thumb'; // 'thumb' | 'text'

function loadFavView() {
  try {
    const s = localStorage.getItem(FAVORITES_VIEW_KEY);
    if (s === 'thumb' || s === 'text') favViewMode = s;
  } catch(e) {}
}
function saveFavView() {
  localStorage.setItem(FAVORITES_VIEW_KEY, favViewMode);
}
function updateViewButtonsUI() {
  const bThumb = document.getElementById('favViewThumb');
  const bText  = document.getElementById('favViewText');
  if (!bThumb || !bText) return;
  // 활성화 느낌만 간단히
  bThumb.style.background = (favViewMode === 'thumb') ? '#666' : '#444';
  bText.style.background  = (favViewMode === 'text')  ? '#666' : '#444';
}


// ✅ 기본 정렬 상태 (page 오름차순)
let favSortBy = 'page';   // 'name' | 'page'
let favSortAsc = true;    // true=오름차순, false=내림차순

// 저장/로드
function loadFavSort() {
  try {
    const s = localStorage.getItem(FAVORITES_SORT_KEY);
    if (!s) return;
    const o = JSON.parse(s);
    if (o && (o.by === 'name' || o.by === 'page')) favSortBy = o.by;
    if (typeof o.asc === 'boolean') favSortAsc = o.asc;
  } catch(e) {}
}
function saveFavSort() {
  localStorage.setItem(FAVORITES_SORT_KEY, JSON.stringify({ by: favSortBy, asc: favSortAsc }));
}

// ep 추출 헬퍼
function getEpNum(f) {
  const ep = (typeof episodeFromRootKey === 'function')
    ? episodeFromRootKey(f.rootKey)
    : undefined;
  return Number.isFinite(ep) ? ep : null; // ep 없으면 null
}

// 정렬 함수
function compareFavorites(a, b) {
  const an = (a.name || '').trim();
  const bn = (b.name || '').trim();
  const epA = getEpNum(a);
  const epB = getEpNum(b);

  if (favSortBy === 'name') {
    // 1) 이름 비어있음은 항상 뒤
    const aEmpty = an === '';
    const bEmpty = bn === '';
    if (aEmpty && !bEmpty) return 1;
    if (!aEmpty && bEmpty) return -1;

    // 2) 이름 비교: 오름/내림차순 적용
    const nameCmp = an.localeCompare(bn, 'ko', { sensitivity: 'base' });
    if (nameCmp !== 0) return favSortAsc ? nameCmp : -nameCmp;

    // 3) tie-breaker: ep → page는 항상 오름차순(방향 영향 X)
    if (epA !== null || epB !== null) {
      if (epA === null && epB !== null) return 1;
      if (epA !== null && epB === null) return -1;
      if (epA !== epB) return epA - epB;
    }
    return a.page - b.page;

  } else { // 'page' 모드
    const dir = favSortAsc ? 1 : -1;

    // ep가 있으면 ep 먼저
    if (epA !== null || epB !== null) {
      if (epA === null && epB !== null) return 1 * dir;
      if (epA !== null && epB === null) return -1 * dir;
      if (epA !== epB) return (epA - epB) * dir;
    }
    return (a.page - b.page) * dir;
  }
}
// 버튼 상태 라벨 업데이트(▲/▼ 토글 표시)
function updateSortButtonsUI() {
  const btnName = document.getElementById('favSortName');
  const btnPage = document.getElementById('favSortPage');
  const arrow = favSortAsc ? '▲' : '▼';

  btnName.textContent = favSortBy === 'name' ? `이름 ${arrow}` : '이름';
  btnPage.textContent = favSortBy === 'page' ? `번호 ${arrow}` : '번호';
}


// 현재 페이지 이미지에서 화면 "중앙"이 차지하는 비율(0~1) 계산
/*
function getCurrentImagePosRatio(page){
  const img = document.getElementById(`page_${page}`);
  if (!img) return 0; // 이미지가 아직 로드 전이면 0으로

  const rect = img.getBoundingClientRect();
  const centerY = window.innerHeight / 2;         // 화면 중앙 y 좌표
  let pos = (centerY - rect.top) / rect.height;   // 이미지 내 위치 비율
  // 0~1로 클램프
  if (!Number.isFinite(pos)) pos = 0;
  pos = Math.max(0, Math.min(1, pos));
  return pos;
}
*/
// 현재 페이지 이미지에서 "뷰포트 상단"이 이미지 높이의 어느 지점인지(0~1) 계산
function getCurrentImagePosRatioTop(page){
  const img = document.getElementById(`page_${page}`);
  if (!img) return 0;

  const rect = img.getBoundingClientRect();
  // 뷰포트 상단은 y = 0
  let pos = (0 - rect.top) / rect.height;  // 상단이 이미지 안에서 차지하는 비율
  if (!Number.isFinite(pos)) pos = 0;
  pos = Math.max(0, Math.min(1, pos));     // 0~1로 클램프
  return pos;
}

// 버튼: 현재 "페이지+위치"로 즐겨찾기 추가
document.getElementById('favAddCurrentPos').addEventListener('click', () => {
  if (!Number.isFinite(currentPage)) {
    alert('현재 페이지를 인식하지 못했습니다.');
    return;
  }
  const pos = getCurrentImagePosRatioTop(currentPage); // ✅ 상단 기준으로 계산
  const name = prompt(`현재 페이지(${currentPage})의 이름(선택)을 입력하세요\n(저장 위치: 약 ${Math.round(pos*100)}%)`, "") || "";
  addFavoriteByPage(currentPage, name.trim(), pos);
});
/* ========== 즐겨찾기 ========== */

/** ❶ 소스에 직접 넣는 기본값(예시)
 *  형식: "이름:페이지번호" 또는 "페이지번호" (이름 생략 가능)
 *  자유롭게 수정하세요.
 */
const DEFAULT_FAVORITES_RAW = [

];


// 유틸: 4자 패딩
function pad4(n){ return padN(n); } // 기존 호출 유지

// ===================== 마지막 이미지 탐지 함수 추가 =====================
// 사용법(예):
//   1) HTML에 <button id="findLastBtn">마지막 이미지 찾기</button> 있으면 클릭 바인딩됨
//   2) 콘솔에서 직접 실행: await findLastImageIndex({start:5000});
// 결과: { lastIndex, attempts, elapsedMs }
async function findLastImageIndex({
  urlTemplate = null,
  start = 1000,
  timeout = 4000,
  delay = 150,
  maxIndex = 2_000_000,
  verbose = true,
  updateUI = true,
  reloadOnDone = true
} = {}) {

  // 0) 우선 PAD/EXT 탐지(없으면 수행). detectPadExt는 위에서 설명한 규약으로 객체 반환해야 함.
  let detectRes = null;
  try {
    detectRes = await detectPadExt({ start, timeout: 3000, delay: 120 });
  } catch (e) {
    console.warn('[findLast] detectPadExt threw:', e);
    detectRes = null;
  }

  // 판정: 성공 조건 = fromStorage === true OR sampleIndex is finite (숫자)
  const detectedOk = detectRes && (detectRes.fromStorage === true || Number.isFinite(detectRes.sampleIndex));
  if (!detectedOk) {
    // 실패: UI 정리 후 종료 (무한루프 방지)
    if (verbose) console.warn('[findLast] PAD/EXT detection failed — aborting last-image search.');
    if (updateUI && typeof loadingIndicator !== 'undefined' && loadingIndicator) {
      loadingIndicator.style.display = 'none';
      loadingIndicator.textContent = '';
    }
    // 반환값으로 실패사유 포함
    return { lastIndex: null, attempts: 0, elapsedMs: 0, reason: 'detect_failed' };
  }

  // 탐지 성공이면 PAD, IMAGE_EXT 값을 적용(전역 변수 동기화)
  try {
    if (detectRes.pad && Number.isFinite(detectRes.pad)) PAD = parseInt(detectRes.pad, 10);
    if (detectRes.ext && typeof detectRes.ext === 'string') IMAGE_EXT = detectRes.ext;
    if (verbose) console.log('[findLast] detect ok — using PAD,EXT =', PAD, IMAGE_EXT, 'sampleIndex=', detectRes.sampleIndex);
  } catch(e){ /* 무시 */ }
  // helper sleep
  const sleep = (ms) => new Promise(r => setTimeout(r, ms));

  // 존재 확인: 이미지 로드 시 OK, error/timeout -> NO
  const exists = (n) => new Promise(resolve => {
    const num = padN(n);
    const url = urlTemplate ? urlTemplate.replace('{n}', String(n)) : getImageSrc(n);
    const img = new Image();
    let done = false;
    const to = setTimeout(() => {
      if (!done) { done = true; try { img.src = ''; } catch(e){}; resolve(false); }
    }, timeout);

    img.onload = () => { if (!done) { done = true; clearTimeout(to); resolve(true); } };
    img.onerror = () => { if (!done) { done = true; clearTimeout(to); resolve(false); } };
    // 일부 환경에서 Referrer 검사가 있으면 no-referrer가 도움될 수 있음
    try { img.referrerPolicy = "no-referrer"; } catch(e) {}
    img.src = url;
  });

  // UI 피드백 헬퍼
  const showProgress = (msg) => {
    if (!updateUI) return;
    try {
      if (loadingIndicator) {
        loadingIndicator.style.display = 'block';
        loadingIndicator.textContent = msg;
      }
    } catch(e){}
    if (verbose) console.log(msg);
  };
  const hideProgress = () => {
    if (!updateUI) return;
    try {
      if (loadingIndicator) {
        loadingIndicator.style.display = 'none';
        loadingIndicator.textContent = '';
      }
    } catch(e){}
  };

  const startTime = Date.now();
  let attempts = 0;
  async function test(n) {
    attempts++;
    showProgress(`Checking #${n} (attempt ${attempts})`);
    const ok = await exists(n);
    await sleep(delay);
    if (verbose) console.log(`[findLast] #${n} => ${ok ? 'OK' : 'NO'}`);
    return ok;
  }

  // 검증 시작 인덱스 조정
  let idx = Math.max(1, Math.floor(start));
  if (idx > maxIndex) idx = maxIndex;

  try {
    // 1) 시작점 검사
    if (await test(idx)) {
      // 성공: 위로(증가) 지수 확장
      let low = idx;
      let high = Math.min(maxIndex + 1, Math.max(idx * 2, idx + 1));
      // high가 존재할때까지 확장
      while (high <= maxIndex && await test(high)) {
        low = high;
        high = Math.min(maxIndex + 1, high * 2);
      }
      // 이제 low(존재), high(비존재) 구간에서 이진탐색
      while (high - low > 1) {
        const mid = Math.floor((low + high) / 2);
        if (await test(mid)) low = mid; else high = mid;
      }
      const elapsedMs = Date.now() - startTime;
      showProgress(`완료: 마지막 이미지 = ${low} (시도 ${attempts})`);
      hideProgress();

      // 갱신: totalImages 및 UI
      // 대체: setTotalImages 사용(로컬에 저장하고 UI 갱신)
setTotalImages(low, { persist: true, updateUI: true });
// loaded 보정은 그대로
if (loaded > totalImages) loaded = totalImages;

      // **여기서 새로고침 (여러 서브폴더 스캔 중엔 억제)**
      if (reloadOnDone && !SUPPRESS_AUTO_RELOAD) {
        try {
          console.log(`[findLast] DONE lastIndex=${low} attempts=${attempts} elapsedMs=${elapsedMs} - reloading page to apply changes`);
          setTimeout(() => { window.location.reload(); }, 160);
        } catch (e) {
          console.warn('reload failed', e);
        }
      }

      return { lastIndex: low, attempts, elapsedMs };
    } else {
      // 시작점 실패: 아래로 반씩 내려가면서 존재 찾기
      let high = idx;
      let low = Math.floor(idx / 2);
      while (low >= 1 && !(await test(low))) {
        high = low;
        low = Math.floor(low / 2);
      }
      if (low < 1) {
        // 1도 없음 -> 전체 이미지 없음
        if (!(await test(1))) {
          const elapsedMs = Date.now() - startTime;
          hideProgress();
          return { lastIndex: 0, attempts, elapsedMs };
        }
        low = 1;
      }
      // 이제 low가 존재(또는 1). 위로 확장 후 이진탐색
      let low2 = low;
      let high2 = Math.min(maxIndex + 1, Math.max(low2 * 2, low2 + 1));
      while (high2 <= maxIndex && await test(high2)) {
        low2 = high2;
        high2 = Math.min(maxIndex + 1, high2 * 2);
      }
      while (high2 - low2 > 1) {
        const mid = Math.floor((low2 + high2) / 2);
        if (await test(mid)) low2 = mid; else high2 = mid;
      }
      const elapsedMs = Date.now() - startTime;
      showProgress(`완료: 마지막 이미지 = ${low2} (시도 ${attempts})`);
      hideProgress();

      // 대체: setTotalImages 사용(로컬에 저장하고 UI 갱신)
setTotalImages(low2, { persist: true, updateUI: true });
// loaded 보정은 그대로
if (loaded > totalImages) loaded = totalImages;

      // **여기서도 새로고침 (여러 서브폴더 스캔 중엔 억제)**
      if (reloadOnDone && !SUPPRESS_AUTO_RELOAD) {
        try {
          console.log(`[findLast] DONE lastIndex=${low2} attempts=${attempts} elapsedMs=${elapsedMs} - reloading page to apply changes`);
          setTimeout(() => { window.location.reload(); }, 160);
        } catch (e) {
          console.warn('reload failed', e);
        }
      }

      return { lastIndex: low2, attempts, elapsedMs };
    }
  } catch (err) {
    hideProgress();
    throw err;
  }
}

// 전역으로 노출(콘솔에서 호출 가능)
window.findLastImageIndex = findLastImageIndex;


// 아주 초기 DOMContentLoaded 핸들러 제일 상단 쪽에
document.addEventListener('DOMContentLoaded', async () => {
  const resume = takeResumeAfterReload();
  if (resume) {
    // 1) 루트 전환 (맵 기반 빠른 전환이 있으면 그걸 사용)
    if (typeof goToRootEnc === 'function') {
      await goToRootEnc(resume.root, resume.page);
      return; // goToRootEnc 내부에서 jump 처리한다면 끝
    }

    // goToRootEnc가 없다면 최소한 전역 갱신 후 jump:
    IMAGE_ROOT = ensureSlash(resume.root);
    loadPrefixFromCfg(IMAGE_ROOT);
    rebuildFilenameRegex?.();

    // totalImages가 맵에 저장돼 있다면 setTotalImages로 UI도 동기화
    const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
    if (Number.isFinite(cfg.total)) setTotalImages(cfg.total, { persist:false, updateUI:true });
    if (Number.isFinite(cfg.first)) FIRST_INDEX = cfg.first;

    // 가로/세로 모드에 맞춰 페이지 로드
    if (viewMode === 'horizontal') {
      container.innerHTML = '';
      showHorizontalPage(resume.page);
    } else {
      container.innerHTML = '';
      loaded = Math.max(0, resume.page - 1);
      if (pageInput) pageInput.value = String(resume.page);
      window.scrollTo({ top: 0, behavior: 'auto' });
      loadNextBatch();
    }

    // (선택) 마지막읽기 저장도 바로 동기화
    saveLastRead(IMAGE_ROOT, resume.page, resume.pos || 0);
    return;
  }
}, { once: true });

// 접두어 로드 후 UI와 로딩 로직 연결
document.addEventListener('DOMContentLoaded', () => {
  // 저장된 접두어 먼저 읽어와서 초기화
  loadPrefixFromCfg();

  const fileInput = document.getElementById('fileInput');
  const applyBtn  = document.getElementById('applyPrefixBtn');
  if (!fileInput || !applyBtn) return;

  // 초기 표시
  fileInput.value = FILE_PREFIX;

  // 적용 로직 + 마지막 파일 찾기
  const applyPrefix = async () => {
    FILE_PREFIX = sanitizePrefix(fileInput.value);
    savePrefixToCfg(IMAGE_ROOT, FILE_PREFIX);
    rebuildFilenameRegex(); // ✅ 접두어 바뀌면 정규식도 갱신

    // 현재 UI 페이지 유지
    const stay = Number.isFinite(currentPage) ? currentPage : 1;
    setCurrentPage(stay, { updateInput: true, silent: true });

    // 뷰모드별로 다시 로드
    if (typeof viewMode !== 'undefined' && viewMode === 'horizontal') {
      // 가로 모드: 한 장만 다시 표시
      container.innerHTML = '';
      await showHorizontalPage(stay);
    } else {
      // 세로 모드: 배치 로더 초기화 후 다시 로드
      container.innerHTML = '';
      loaded = Math.max(0, stay - 1);
      const pi = document.getElementById('pageInput');
      if (pi) pi.value = String(stay);
      window.scrollTo({ top: 0, behavior: 'auto' });
      loadNextBatch();
    }

    // (선택) 새 접두어 기준으로 다시 탐지하고 싶으면 주석 해제
    // localStorage.removeItem(DETECTED_TOTAL_KEY);
    // localStorage.removeItem(DETECTED_PAD_KEY);
    // localStorage.removeItem(DETECTED_EXT_KEY);

    // ✅ 마지막 이미지 찾기 자동 실행
    if (typeof findLastImageIndex === 'function') {
      try {
        applyBtn.disabled = true;
        if (loadingIndicator) {
          loadingIndicator.style.display = 'block';
          loadingIndicator.textContent = '접두어 적용됨: 마지막 파일 찾는 중...';
        }

        const res = await findLastImageIndex({
          start: Math.max(1, stay),   // 혹은 5000 고정 원하면 5000
          timeout: 4000,
          delay: 200,
          maxIndex: 200000,
          verbose: true,
          updateUI: true,
		  reloadOnDone: true
        });

        alert(`완료: 마지막 이미지 = ${res.lastIndex} (시도 ${res.attempts}, ${Math.round(res.elapsedMs/1000)}s)`);
      } catch (e) {
        alert('오류 발생: ' + (e && e.message ? e.message : String(e)));
      } finally {
        applyBtn.disabled = false;
        if (loadingIndicator) {
          loadingIndicator.style.display = 'none';
          loadingIndicator.textContent = '';
        }
      }
    }
  };

  // 버튼으로 적용
  applyBtn.addEventListener('click', () => { applyPrefix(); });

  // (옵션) Enter로도 적용하고 싶으면 유지, 아니면 지워도 됨
  fileInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') applyPrefix();
  });

  // (옵션) 자동 적용 원치 않으면 change 핸들러는 생략
  // fileInput.addEventListener('change', applyPrefix);
});


document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('scanAllSubsBtn');
  if (!btn) return;

  btn.addEventListener('click', async () => {
    if (!confirm('서버에 많은 요청이 발생합니다. 계속할까요?')) return;
    btn.disabled = true;
    try {
      await scanAllSubfolders({
        startNum: 1,
        maxNum: 300,
        stopOnMissStreak: 3,
        startProbe: 1000,
        timeout: 4000,
        delay: 120,
        maxIndex: 2_000_000,
        verbose: true,
        updateUIBanner: true,
		reloadOnDone: true
      });

      // ✅ 셀렉트 즉시 갱신
      if (typeof refreshSubfolderSelect === 'function') {
        refreshSubfolderSelect();
      } else {
        // (안 보이면 이벤트로 통지)
        document.dispatchEvent(new CustomEvent('subs:changed'));
      }
    } catch (e) {
      alert('오류: ' + (e?.message || e));
    } finally {
      btn.disabled = false;
    }
  });
});


// 버튼이 있으면 바인딩 (optional)
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('findLastBtn');
  if (btn) {
    btn.addEventListener('click', async () => {
      if (!confirm('서버에 다수의 요청을 보냅니다. 계속 진행할까요?')) return;
      try {
        btn.disabled = true;
        const res = await findLastImageIndex({ start: 1000, timeout: 4000, delay: 200, maxIndex: 200000, verbose: true, updateUI: true });
        alert(`완료: 마지막 이미지 = ${res.lastIndex} (시도 ${res.attempts}, ${Math.round(res.elapsedMs/1000)}s)`);
      } catch (e) {
        alert('오류 발생: ' + (e && e.message ? e.message : String(e)));
      } finally {
        btn.disabled = false;
        // loadingIndicator 텍스트 복원
        if (loadingIndicator) loadingIndicator.style.display = 'none';
      }
    });
  }
});
// 제목(메인 폴더) 아래의 모든 서브폴더 레코드를 통째로 삭제
function clearCfgForAllEpisodes() {
  const map = loadCfgMap(); // IMAGE_CFG_MAP_KEY에서 로드
  const base = ensureSlash(mainFolderRaw); // 예: "[오시미 슈조] 피의 흔적/"

  let removed = 0;
  for (const k of Object.keys(map)) {
    // config map 키는 "[<decoded root>]" 형태(예: "[[오시미 슈조] 피의 흔적/피의 흔적 1화/]")
    const inner = (k.startsWith('[') && k.endsWith(']')) ? k.slice(1, -1) : k; // 바깥 대괄호 제거
    if (ensureSlash(inner).startsWith(base)) {
      delete map[k];
      removed++;
    }
  }

  saveCfgMap(map);

  // 저장된 루트가 현재 제목 아래를 가리키면 같이 제거 (선택)
  try {
    const savedRoot = localStorage.getItem(DETECTED_ROOT_KEY);
    if (savedRoot) {
      const dec = ensureSlash(decodeURIComponent(savedRoot));
      if (dec.startsWith(base)) {
        localStorage.removeItem(DETECTED_ROOT_KEY);
      }
    }
  } catch (e) {}

  return removed;
}
function clearDetectedTotal() {
  try {
    // 현재 루트/프리픽스의 total만 null 처리
    setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', { total: undefined });
    // undefined가 남는게 싫으면 완전 삭제 후 재저장해도 됨:
    const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
    delete cfg.total;
    setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', cfg);
    console.log('[clear] removed detected total from IMAGE_CFG_MAP');
  } catch(e){}
}
window.clearDetectedTotal = clearDetectedTotal;

document.addEventListener('DOMContentLoaded', () => {
  const clearBtn = document.getElementById('clearDetectedBtn');
  if (!clearBtn) return;

  clearBtn.addEventListener('click', () => {
    if (!confirm('이 작품의 이미지 설정 맵을 통째로 삭제할까요?\n(모든 화의 pad/ext/first/total/접두어 기록이 제거됩니다)')) return;

    const ok = nukeImageConfigMapForThisTitle();
    alert(ok ? '삭제 완료: 전 회차 기록을 모두 지웠습니다.' : '삭제할 항목이 없었습니다.');
  });
});
document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('toggleOrientationBtn');
  if (!toggleBtn) return;

  const sentinelEl = document.getElementById('sentinel');
function applyOrientationUI(){
  const on = (viewMode === 'horizontal');
  toggleBtn.textContent = on ? '가로' : '가로';
  setBtnPressed(toggleBtn, on);                   // 활성 표시
}
  function enterHorizontal(){
  viewMode = 'horizontal';
  toggleBtn.textContent = '가로';
  container.innerHTML = '';
  try { observer.disconnect(); } catch(e){}
  sentinelEl && (sentinelEl.style.display = 'none');
  container.classList.add('hmode');

  ensureHorizontalViewers();            // ← 추가!
  const stay = Number.isFinite(currentPage) ? currentPage : 1;
  showHorizontalPage(stay);             // 그대로 유지
  applyOrientationUI();
}

  function exitHorizontal(){
    viewMode = 'vertical';
    toggleBtn.textContent = '가로';

    // 컨테이너 모드 해제
    container.classList.remove('hmode');

    // 세로 스크롤 초기화: 현재 페이지가 맨 위로 오게
    const stay = Number.isFinite(currentPage) ? currentPage : 1;
    container.innerHTML = '';
    loaded = Math.max(0, stay - 1);
    if (pageInput) pageInput.value = stay;

    // 센티넬 다시 보이고 옵저버 재연결
    if (sentinelEl) sentinelEl.style.display = '';
    try { observer.observe(sentinelEl); } catch(e){}

    // 한 배치 로드
    loadNextBatch();
    window.scrollTo({ top: 0, behavior: 'auto' });
	applyOrientationUI();
  }

  toggleBtn.addEventListener('click', () => {
    if (viewMode === 'vertical') enterHorizontal();
    else exitHorizontal();
  });

  // 가로 모드에서 키보드 좌우로 이동
  document.addEventListener('keydown', async (e) => {
  if (viewMode !== 'horizontal') return;
  if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;

  if (e.key === 'ArrowRight') {
    if (currentPage < totalImages) showHorizontalPage(currentPage + 1);
    else await tryAdvanceToNextSubfolder();  // 이미 넣어둔 순방향
  } else if (e.key === 'ArrowLeft') {
    if (currentPage > 1) {
      showHorizontalPage(currentPage - 1);
    } else {
      await tryRetreatToPrevSubfolder();     // ★ 첫 장에서 ← 시 이전 회차 마지막
    }
  }
});

// 클릭(오른쪽 반화면 = 다음)
container.addEventListener('click', async (e) => {
  if (viewMode !== 'horizontal') return;
  if (e.altKey) return;
  if (window.__hSwipeLock) return;

  const x = e.clientX, mid = window.innerWidth / 2;
  if (x >= mid) {
    if (currentPage < totalImages) showHorizontalPage(currentPage + 1);
    else await tryAdvanceToNextSubfolder();
  } else {
    if (currentPage > 1) {
      showHorizontalPage(currentPage - 1);
    } else {
      await tryRetreatToPrevSubfolder();     // ★
    }
  }
});
});
// ===== 가로모드 전용 스와이프(터치) 내비게이션 =====
(() => {
  let startX = 0, startY = 0, startT = 0;
  let moved = false;

  const THRESHOLD_PX = 40;   // 최소 스와이프 길이
  const ANGLE_RATIO  = 1.5;  // 가로가 세로보다 이 정도 이상 커야 스와이프 인정
  const TAP_LOCK_MS  = 220;  // 스와이프 직후 탭(클릭) 잠깐 무시

  const onTouchStart = (ev) => {
    if (viewMode !== 'horizontal') return;
    const t = ev.touches && ev.touches[0];
    if (!t) return;
    startX = t.clientX;
    startY = t.clientY;
    startT = Date.now();
    moved = false;
  };

  const onTouchMove = (ev) => {
    if (viewMode !== 'horizontal') return;
    const t = ev.touches && ev.touches[0];
    if (!t) return;
    const dx = t.clientX - startX;
    const dy = t.clientY - startY;
    if (Math.abs(dx) > 6 || Math.abs(dy) > 6) moved = true;

    // 가로 스와이프 성향이면 스크롤 방지
    if (Math.abs(dx) > Math.abs(dy) * ANGLE_RATIO) {
      ev.preventDefault();
    }
  };

  const onTouchEnd = (ev) => {
    if (viewMode !== 'horizontal') return;
    const t = ev.changedTouches && ev.changedTouches[0];
    if (!t) return;
    const dx = t.clientX - startX;
    const dy = t.clientY - startY;
    const dt = Date.now() - startT;

    // 가로 스와이프 판정
    const isHorizontal = Math.abs(dx) > Math.abs(dy) * ANGLE_RATIO;
    if (isHorizontal && Math.abs(dx) >= THRESHOLD_PX) {
      // 스와이프 → 클릭 이벤트 잠깐 락
      window.__hSwipeLock = true;
      setTimeout(() => { window.__hSwipeLock = false; }, TAP_LOCK_MS);

      // onTouchEnd 내부
      // 스와이프(왼→오 = 다음)
 /* onTouchEnd 내부의 'dx < 0' 분기 */
 if (dx < 0) {
   if (currentPage < totalImages) showHorizontalPage(currentPage + 1);
   else tryAdvanceToNextSubfolder().then(()=>{});
 }
    } else {
      // 스와이프 아니면 탭으로 처리(위의 클릭 핸들러가 반 나눔을 처리)
      // 여기선 별도 동작 없음
    }
  };

  // 컨테이너에 바인딩
  container.addEventListener('touchstart', onTouchStart, { passive: false });
  container.addEventListener('touchmove',  onTouchMove,  { passive: false });
  container.addEventListener('touchend',   onTouchEnd,   { passive: false });
})();

// ★ 현재 타이틀(메인 폴더) 아래 모든 "이미-알려진" 서브폴더 풀 경로(인코딩) 목록
function listKnownSubRootsForThisTitle() {
  const map = loadCfgMap();
  const out = [];
  const baseDec = ensureSlash(mainFolderRaw); // mainFolderRaw는 디코딩 상태
  for (const k of Object.keys(map || {})) {
    if (!k.startsWith('[') || !k.endsWith(']')) continue;
    const decRoot = ensureSlash(k.slice(1, -1)); // 키에서 [] 제거 → 디코딩된 루트
    if (decRoot.startsWith(baseDec)) {
      out.push(ensureSlash(encodeURI(decRoot))); // 값은 인코딩된 풀 경로로
    }
  }
  return out;
}

// ★ 풀 경로(인코딩)에서 회차 번호 파싱
function extractSubNumFromRootEnc(rootEnc) {
  try {
    const dec = decodeURI(ensureSlash(rootEnc));
    // 예: "<메인>/<baseName> 12화/"
    const re = new RegExp(`${escRe(ensureSlash(mainFolderRaw))}${escRe(baseName)}\\s+(\\d+)${escRe(subfolderSuffix)}\\/?$`);
    const m = dec.match(re);
    return m ? parseInt(m[1],10) : null;
  } catch(e){ return null; }
}

// ★ 현재 ROOT의 회차 번호
function getCurrentSubNum() {
  const cur = ensureSlash(IMAGE_ROOT || '');
  return extractSubNumFromRootEnc(cur);
}

// ★ n회 경로(인코딩된 풀 루트) 생성
function buildSubfolderRootByNum(n){
  const subRaw = ensureSlash(`${baseName} ${n}${subfolderSuffix}`);
  return ensureSlash(mainFolder + encodeURI(subRaw)); // mainFolder는 이미 인코딩됨
}

// ★ 현재 회차 기준 다음/이전 "알려진" 회차 찾기
function getNextKnownSubRootEnc(){
  const cur = ensureSlash(IMAGE_ROOT || '');
  const list = listKnownSubRootsForThisTitle()
    .map(r => ({ r, n: extractSubNumFromRootEnc(r) }))
    .filter(x => Number.isFinite(x.n))
    .sort((a,b)=>a.n-b.n);
  const idx = list.findIndex(x => ensureSlash(x.r) === cur);
  return (idx !== -1 && idx+1 < list.length) ? list[idx+1].r : null;
}
function getPrevKnownSubRootEnc(){
  const cur = ensureSlash(IMAGE_ROOT || '');
  const list = listKnownSubRootsForThisTitle()
    .map(r => ({ r, n: extractSubNumFromRootEnc(r) }))
    .filter(x => Number.isFinite(x.n))
    .sort((a,b)=>a.n-b.n);
  const idx = list.findIndex(x => ensureSlash(x.r) === cur);
  return (idx > 0) ? list[idx-1].r : null;
}
/* === 일정 시간 무입력 시 검정 화면 보호 === */
(() => {
  const IDLE_MS = 300_000; // 1분
  const shield  = document.getElementById('idleShield');
  let idleTimer = null;
  let idleOn    = false;

  function enterIdle(){
    if (idleOn) return;
    idleOn = true;
    shield.classList.add('on');
    // 필요하면 여기서 로딩/애니메이션 일시정지 로직을 넣을 수 있음
  }
  function exitIdle(){
    if (!idleOn) return;
    idleOn = false;
    shield.classList.remove('on');
  }
  function resetIdleTimer(){
    if (idleTimer) clearTimeout(idleTimer);
    if (idleOn) exitIdle();
    idleTimer = setTimeout(enterIdle, IDLE_MS);
  }

  // 유저 활동 이벤트 → 타이머 리셋
  const ACTIVITY_EVENTS = [
    'mousemove','mousedown','mouseup','keydown','wheel',
    'touchstart','touchmove','pointermove'
  ];
  ACTIVITY_EVENTS.forEach(type => {
    // 스크롤/터치에서 성능 위해 passive:true (preventDefault 안쓸거라 OK)
    window.addEventListener(type, resetIdleTimer, { passive: true });
  });

  // 보호막을 탭/클릭하면 즉시 해제
  shield.addEventListener('click', exitIdle, { passive: true });
  shield.addEventListener('touchstart', exitIdle, { passive: true });

  // 탭이 다시 활성화되면 타이머 재가동
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') resetIdleTimer();
  });

  // 초기 가동
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', resetIdleTimer, { once: true });
  } else {
    resetIdleTimer();
  }
})();

// 이 타이틀(=mainFolderRaw) 아래의 서브폴더들을 정렬된 배열로 반환
// [{rootEnc, rootKey, ep, total}]
function getOrderedSubfoldersForThisTitle(){
  const mainRaw = ensureSlash(mainFolderRaw); // 디코딩(원본) 경로
  const map = loadCfgMap() || {};
  const items = [];

  for (const [k, rec] of Object.entries(map)) {
    const decRoot = String(k).replace(/^\[|\]$/g,''); // 대괄호 제거(디코딩 경로)
    if (!ensureSlash(decRoot).startsWith(mainRaw)) continue;

    const rootEnc = ensureSlash(encodeURI(decRoot)); // 사용은 인코딩 경로로
    items.push({
      rootEnc,
      rootKey: k,
      ep: episodeFromRootKey(k),
      total: Number.isFinite(rec?.total) ? rec.total : null
    });
  }

  // 정렬: ep 숫자 있으면 우선 정렬 → 없으면 경로 문자열
  items.sort((a,b)=>{
    const ae = a.ep, be = b.ep;
    if (Number.isFinite(ae) && Number.isFinite(be)) return ae - be;
    if (Number.isFinite(ae)) return -1;
    if (Number.isFinite(be)) return 1;
    return a.rootEnc.localeCompare(b.rootEnc, 'ko', {sensitivity:'base'});
  });

  return items;
}

// 현재 IMAGE_ROOT 기준 다음 서브폴더(있으면) 반환
function getNextSubfolderRootEnc(){
  const list = getOrderedSubfoldersForThisTitle();
  const cur = ensureSlash(IMAGE_ROOT || '');
  const idx = list.findIndex(it => ensureSlash(it.rootEnc) === cur);
  if (idx === -1) return null;
  const nxt = list[idx + 1];
  return nxt ? ensureSlash(nxt.rootEnc) : null;
}
// 이미 있는 getOrderedSubfoldersForThisTitle() 재사용

function getPrevSubfolderRootEnc(){
  const list = getOrderedSubfoldersForThisTitle();
  const cur = ensureSlash(IMAGE_ROOT || '');
  const idx = list.findIndex(it => ensureSlash(it.rootEnc) === cur);
  if (idx <= 0) return null;
  const prev = list[idx - 1];
  return prev ? ensureSlash(prev.rootEnc) : null;
}
// 마지막 페이지 보장 유틸(맵에 total 없으면 탐지)
async function ensureLastPageKnownForCurrentRoot(){
  const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
  if (Number.isFinite(cfg.total) && cfg.total > 0) {
    setTotalImages(cfg.total, { persist:false, updateUI:true });
    return cfg.total;
  }
  // PAD/EXT 짧게 보정
  try { await detectPadExt?.({timeout: 2000, delay: 80, verbose: false, trySubfolderOnFail: false }); } catch(e){}
  // 마지막 번호 탐색(배너 갱신 안 함)
  const res = await findLastImageIndex({
    start: 1000, timeout: 3500, delay: 120,
    maxIndex: 2_000_000, verbose: false, updateUI: false
  });
  const last = Number.isFinite(res?.lastIndex) ? res.lastIndex : 1;
  setTotalImages(last, { persist:true, updateUI:true });
  return last;
}

// 역방향 이어가기
let __autoRetreating = false;
async function tryRetreatToPrevSubfolder(){
  if (__autoRetreating) return false;
  const prevEnc = getPrevSubfolderRootEnc();
  if (!prevEnc) return false;

  __autoRetreating = true;
  try {
    // 먼저 이전 회차로 전환(1페이지로 가도 됨)
    await goToRootEnc(prevEnc, 1);

    // 그 회차의 마지막 페이지 파악
    const last = await ensureLastPageKnownForCurrentRoot();

    // 마지막 페이지로 점프
    setCurrentPage(last, { updateInput:true, silent:true });
    if (viewMode === 'horizontal') {
      await showHorizontalPage(last);
    } else {
      container.innerHTML = '';
      loaded = Math.max(0, last - 1);
      window.scrollTo({ top: 0, behavior: 'auto' });
      loadNextBatch();
    }

    showToast?.(`이전 회차 마지막으로 이동합니다`);
    return true;
  } finally {
    setTimeout(()=>{ __autoRetreating = false; }, 250);
  }
}
// 표시 제목 갱신(서브폴더명 포함)
function applyDisplayTitleForRoot(rootEnc){
  const dec = decodeURIComponent(ensureSlash(rootEnc));
  // dec = ".../<제목> N화/" 꼴 → 마지막 세그먼트를 타이틀로
  const segs = dec.replace(/\/+$/,'').split('/');
  const last = segs[segs.length - 1] || baseName;
  const newTitle = last || baseName;

  // 전역 displayTitle이 있다면 바꿔주고 DOM 반영
  try {
    window.displayTitle = newTitle;
    document.title = newTitle;
    const h1 = document.getElementById('bookTitle');
    const hInline = document.getElementById('bookTitleInline');
    if (h1) h1.textContent = newTitle;
    if (hInline) hInline.textContent = newTitle;
  } catch(e){}
}

async function goToRootEnc(fullRootEnc, startPage = 1) {
  const rootEnc = ensureSlash(fullRootEnc);

  // 사용자가 의도적으로 바꾼 '액티브 루트'만 저장/사용
  if (typeof setActiveRoot === 'function') setActiveRoot(rootEnc);

  // 1) 가능하면 맵 기반 전환 함수로 (탐지 스킵)
  if (typeof switchToRootUsingMap === 'function') {
    await switchToRootUsingMap(rootEnc);
  } else {
    // 2) 맵 우선 적용 (pad/ext/first/total), 없을 때만 짧게 탐지
    IMAGE_ROOT = rootEnc;
    try { localStorage.setItem(DETECTED_ROOT_KEY, IMAGE_ROOT); } catch(e){}

    // 맵에서 가능한 메타 즉시 반영
    const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
    if (Number.isFinite(cfg.pad))   PAD = cfg.pad;
    if (typeof cfg.ext === 'string' && cfg.ext) IMAGE_EXT = cfg.ext;
    if (Number.isFinite(cfg.first)) FIRST_INDEX = cfg.first;
    if (Number.isFinite(cfg.total)) setTotalImages(cfg.total, { persist:false, updateUI:true });

    rebuildFilenameRegex?.();

    // pad/ext가 없다면 '짧게'만 탐지 (서브폴더 재시도 금지)
    const needDetect = !(Number.isFinite(cfg.pad) && typeof cfg.ext === 'string' && cfg.ext);
    if (needDetect && typeof detectPadExt === 'function') {
      try {
        await detectPadExt({ timeout: 2000, delay: 80, verbose: false, trySubfolderOnFail: false });
      } catch(e){}
    }

    // total이 아직 없으면 기존값 유지(무거운 마지막찾기는 사용자가 버튼으로)
    // setTotalImages는 위에서 cfg.total이 있을 때만 호출됨
  }

  // 3) 제목은 '서브폴더명만' 표시
  updateTitleFromRoot(rootEnc); // 내부에서 bookTitle / bookTitleInline / document.title 동기화

  // 4) 렌더
  setCurrentPage(startPage, { updateInput:true, silent:true });
  container.innerHTML = '';
  if (viewMode === 'horizontal') {
    await showHorizontalPage(startPage);
    // 읽은 위치 저장은 액티브 루트 기준으로 일관화
    if (typeof saveLastReadForCurrentRoot === 'function') {
      saveLastReadForCurrentRoot(startPage, 0);
    } else {
      saveLastRead(IMAGE_ROOT, startPage, 0);
    }
  } else {
    loaded = Math.max(0, startPage - 1);
    window.scrollTo({ top: 0, behavior: 'auto' });
    loadNextBatch();
  }

  // 5) 선택기 갱신 이벤트
  try { document.dispatchEvent(new CustomEvent('subs:changed')); } catch(e){}
}

// ★ 주어진 rootEnc에 대해 pad/ext/first/total을 탐지하고 맵에 저장
async function probeAndSaveSubfolder(rootEnc){
  const prevRoot = IMAGE_ROOT;
  try {
    IMAGE_ROOT = ensureSlash(rootEnc);

    // pad/ext/first
    const det = await detectPadExt({
      timeout: 3000, delay: 120, verbose: false, trySubfolderOnFail: false
    });
    // 실패면 무효
    const ok = det && (det.fromStorage === true || Number.isFinite(det.sampleIndex));
    if (!ok) return false;

    // total
    const res = await findLastImageIndex({
      start: 1000, timeout: 3500, delay: 120,
      maxIndex: 2_000_000, verbose: false, updateUI: false, reloadOnDone: false
    });
    const last = Number.isFinite(res?.lastIndex) ? res.lastIndex : 0;
    if (!last) return false;

    // 저장 (맵 키는 디코딩된 풀 경로로 관리)
    setCfgFor(IMAGE_ROOT, FILE_PREFIX || '', {
      pad: PAD, ext: IMAGE_EXT, first: FIRST_INDEX ?? 0, total: last,
      // root 필드는 디코딩 상태로 넣어 두면 listKnownSubRootsForThisTitle()에서 재구축 가능
      root: decodeURI(IMAGE_ROOT)
    });

    // 셀렉터 갱신
    document.dispatchEvent(new CustomEvent('subs:changed'));
    return true;
  } finally {
    IMAGE_ROOT = prevRoot;
  }
}
// ★ 마지막 장에서 다음 회차로 나아가기(맵에 없으면 즉석 탐지)
let __autoAdvancing = false;
async function tryAdvanceToNextSubfolder(){
  
  if (__autoAdvancing) return false;
  if (currentPage < totalImages) return false;

  __autoAdvancing = true;
  try {
    // 1) 먼저 '알려진' 다음 회차
    let target = getNextKnownSubRootEnc();

    // 2) 없으면 현재 회차 번호 + 1 을 "예상 경로"로 즉석 탐지
    if (!target) {
      const curNum = getCurrentSubNum();
      if (Number.isFinite(curNum)) {
        const guess = buildSubfolderRootByNum(curNum + 1);
        const ok = await probeAndSaveSubfolder(guess);
        if (ok) target = guess;
      }
    }

    if (!target) {
      showToast?.('다음 회차가 없습니다');
      return false;
    }

    await goToRootEnc(target, 1);
    showToast?.('다음 회차로 이동');
    return true;
  } finally {
    setTimeout(()=>{ __autoAdvancing = false; }, 250);
  }
}
// 이미 있음: makeRootKey(rootEnc)  // "[디코딩된경로]"
// ⬇️ 역변환: 맵 키 → 인코딩된 풀 루트
function rootEncFromKey(rootKey){
  // rootKey 형식: "[디코딩된 경로/]"
  const decoded = String(rootKey || '').replace(/^\[/,'').replace(/\]$/,'');
  return ensureSlash(encodeURI(decoded));
}

// ★ root 전용 URL 빌더 (해당 root의 cfg에서 pad/ext/prefix를 가져와 조합)
function getImageSrcForRoot(rootOrKey, page, fallbackExt){
  const isKey = /^\[.*\]$/.test(String(rootOrKey));
  const rootEnc = isKey ? rootEncFromKey(rootOrKey) : ensureSlash(rootOrKey);

  const cfg = getCfgFor(ensureSlash(rootEnc), '') || {};
  const pad  = Number.isFinite(cfg.pad) ? cfg.pad : PAD;
  const ext  = (cfg.ext || fallbackExt || IMAGE_EXT || 'jpg');
  const pfx  = sanitizePrefix(cfg.prefixes || FILE_PREFIX || '');
  const n    = fileNoFromPage(page);
  const num  = pad > 0 ? String(n).padStart(pad, '0') : String(n);

  return `${ensureSlash(rootEnc)}${pfx}${num}.${ext}`;
}
// 서브폴더 맵 키에서 "N화" 숫자 뽑기: [[제목/제목 N화/]] 형태
function episodeFromRootKey(rootKey){
  try{
    const raw = String(rootKey || '').replace(/^\[|\]$/g, ''); // 대괄호 제거
    const dec = decodeURIComponent(raw);
    const m = dec.match(/(\d+)\s*화/);
    return m ? parseInt(m[1], 10) : null;
  }catch(e){ return null; }
}

// 즐겨찾기 표시용 라벨 만들기: "<N화-><페이지> (@퍼센트)"
function makeFavLabel(f){
  const ep = episodeFromRootKey(f.rootKey);
  const epPart = Number.isFinite(ep) ? `${ep}-` : '';
  const pagePart = `${f.page}`;
  const percent = (typeof f.pos === 'number') ? ` @${Math.round(f.pos*100)}%` : '';
  // 이름을 앞에 붙이고 싶다면 아래처럼: (원하면 주석 해제)
   const namePart = (f.name && f.name.trim()) ? `${f.name.trim()} ` : '';
  return `${namePart}${epPart}${pagePart}`;
  //return `${epPart}${pagePart}`;
}
// 파서: "이름:페이지" | "페이지"
function parseFav(raw){
  const s = String(raw).trim();
  if (!s) return null;

  // 1) 위치 분리 (예: "이름:120@50%" | "120@0.3" | "120")
  let main = s, pos = 0; // 기본 0(맨 위)
  const atIdx = s.lastIndexOf('@');
  if (atIdx !== -1) {
    main = s.slice(0, atIdx).trim();
    let posStr = s.slice(atIdx + 1).trim();
    // % 또는 소수
    if (posStr.endsWith('%')) {
      const n = parseFloat(posStr.slice(0, -1));
      if (Number.isFinite(n)) pos = Math.min(1, Math.max(0, n / 100));
    } else {
      const n = parseFloat(posStr);
      if (Number.isFinite(n)) pos = Math.min(1, Math.max(0, n));
    }
  }

  // 2) 이름:페이지 | 페이지 파싱
  const idx = main.lastIndexOf(':');
  let name = "", p = NaN;
  if (idx === -1) {
    p = parseInt(main, 10);
  } else {
    name = main.slice(0, idx).trim();
    p = parseInt(main.slice(idx + 1).trim(), 10);
  }

  if (!Number.isFinite(p) || p < 1 || p > totalImages) return null;
  const curRootKey = (typeof makeRootKey === 'function')
  ? makeRootKey(ensureSlash(IMAGE_ROOT || folder || ''))
  : null;

  return { name, page: p, pos, rootKey: curRootKey }; // ✅ pos 추가
}

// 기본 배열 파싱
const DEFAULT_FAVORITES = DEFAULT_FAVORITES_RAW
  .map(parseFav)
  .filter(Boolean);

// 상태
let favorites = [];
// 공용 헬퍼: 진짜 렌더 직전에 박스 크기 읽기
function getThumbSize(el){
  // 이미 DOM에 붙어 있어야 제대로 값이 나옵니다.
  // 값이 0이면 다음 프레임에 다시 시도하도록 호출부에서 처리
  const w = Math.round(el.clientWidth  || el.offsetWidth  || parseFloat(getComputedStyle(el).width)  || 0);
  const h = Math.round(el.clientHeight || el.offsetHeight || parseFloat(getComputedStyle(el).height) || 0);
  return { w, h };
}
// 로드/세이브
function loadFavorites(){
  try{
    const s = localStorage.getItem(FAVORITES_KEY);
    favorites = s ? (JSON.parse(s) || []) : [...DEFAULT_FAVORITES];
    favorites = Array.isArray(favorites) ? favorites.filter(x => x && x.page) : [];
  } catch(e){
    favorites = [...DEFAULT_FAVORITES];
  }

}
function saveFavorites(){
  localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
}
async function jumpDirectToRoot(rootEnc, page, pos = 0){
  const targetRoot = ensureSlash(rootEnc || IMAGE_ROOT || '');
  if (ensureSlash(IMAGE_ROOT) !== targetRoot) {
    // 루트 전환 (가벼운 버전)
    try { localStorage.setItem(DETECTED_ROOT_KEY, targetRoot); } catch(e){}
    try { setCfgFor(targetRoot, FILE_PREFIX || '', { /* root는 맵키 자체로 식별되므로 저장 불필요 */ }); } catch(e){}
    IMAGE_ROOT = targetRoot;
    rebuildFilenameRegex?.();
    try { await detectPadExt?.({ timeout: 2000, delay: 80, verbose: false, trySubfolderOnFail: false }); } catch(e){}
  }

  // 점프 + 위치 스크롤
  jumpDirect(page, pos);
}
async function jumpDirectToRootKey(rootKey, page, pos = 0){
  const targetEnc = rootEncFromKey(rootKey);
  if (ensureSlash(IMAGE_ROOT) !== ensureSlash(targetEnc)) {
    try { localStorage.setItem(DETECTED_ROOT_KEY, ensureSlash(targetEnc)); } catch(e){}
    IMAGE_ROOT = ensureSlash(targetEnc);
    rebuildFilenameRegex?.();
    try {
      // 새 루트 cfg 반영 (pad/ext/first 등) 빠르게 동기화
      await detectPadExt?.({ timeout: 2000, delay: 80, verbose: false, trySubfolderOnFail: false });
    } catch(e){}
  }
  jumpDirect(page, pos);
}
// 렌더
let favRenderVersion = 0;
const favListEl = document.getElementById('favList');
function renderFavorites(){
  favRenderVersion++;
  const myVersion = favRenderVersion;
  favListEl.innerHTML = "";
  const sorted = favorites.slice().sort(compareFavorites);

  if (favViewMode === 'text') {
    favListEl.classList.add('favListText');
    sorted.forEach((f) => {
      const row = document.createElement('div');
      row.className = 'favTextItem';

      const btn = document.createElement('button');
      btn.className = 'favTextLink';
      btn.addEventListener('click',   () => jumpDirectToRootKeyFixed(f.rootKey, f.page, (typeof f.pos === 'number' ? f.pos : 0)));

      btn.textContent = makeFavLabel(f);

      const del = document.createElement('button');
      del.className = 'favTextDel';
      del.title = '즐겨찾기 삭제';
      del.textContent = '\u00D7';
      del.addEventListener('click', (e) => {
        e.stopPropagation();
        const i = favorites.findIndex(x =>
          x.page === f.page && (x.name||'') === (f.name||'') && x.rootKey === f.rootKey
        );
        if (i !== -1) favorites.splice(i, 1);
        saveFavorites();
        renderFavorites();
      });

      row.appendChild(btn);
      row.appendChild(del);
      favListEl.appendChild(row);
    });

  } else {
    favListEl.classList.remove('favListText');
    sorted.forEach((f) => {
      const item = document.createElement('div');
      item.className = 'favItem';

      const thumb = document.createElement('div');
      thumb.className = 'favThumb';

      const pos = (typeof f.pos === 'number') ? f.pos : 0.5;

      // ★ rootKey로 썸네일 생성
      buildSeamlessThumb(thumb, f.page, pos, f.rootKey);

      thumb.addEventListener('click', () => jumpDirectToRootKeyFixed(f.rootKey, f.page, (typeof f.pos === 'number' ? f.pos : 0)));

      const del = document.createElement('button');
      del.className = 'favDel';
      del.textContent = '\u00D7';
      del.title = '즐겨찾기 삭제';
      del.addEventListener('click', (e) => {
        e.stopPropagation();
        const i = favorites.findIndex(x =>
          x.page === f.page && (x.name||'') === (f.name||'') && x.rootKey === f.rootKey
        );
        if (i !== -1) favorites.splice(i, 1);
        saveFavorites();
        renderFavorites();
      });

      const cap = document.createElement('div');
      cap.className = 'favCap';
      cap.textContent = makeFavLabel(f);

      item.appendChild(thumb);
      item.appendChild(del);
      item.appendChild(cap);
      favListEl.appendChild(item);
    });
  }

  updateSortButtonsUI();
  updateViewButtonsUI();
}
// "[[작품/제목 4화/]]" 같은 맵 키 → 인코딩된 풀 루트로
function rootKeyToRootEnc(rootKey){
  const inner = String(rootKey || '').replace(/^\s*\[|\]\s*$/g, ''); // 대괄호 벗기기
  return ensureSlash(encodeURI(inner)); // 슬래시는 그대로, 나머지만 인코딩
}

// 제목 갱신
function updateTitleFromRoot(rootEnc){
  try{
    const rootDec = decodeURIComponent(ensureSlash(rootEnc));
    const mainDec = decodeURIComponent(ensureSlash(mainFolder));
    let label = rootDec.startsWith(mainDec)
      ? rootDec.slice(mainDec.length).replace(/\/+$/,'') // "피의 흔적 4화"
      : rootDec.replace(/\/+$/,'');
    if (!label) label = baseName;

    document.title = label;
    const h1 = document.getElementById('bookTitle');
    const hInline = document.getElementById('bookTitleInline');
    if (h1) h1.textContent = label;
    if (hInline) hInline.textContent = label;
  }catch{
    document.title = baseName;
    const h1 = document.getElementById('bookTitle');
    const hInline = document.getElementById('bookTitleInline');
    if (h1) h1.textContent = baseName;
    if (hInline) hInline.textContent = baseName;
  }
}

// 루트키 기준으로 전환 + 제목 갱신 + 페이지/위치 점프
async function jumpDirectToRootKeyFixed(rootKey, page, pos=0){
  const rootEnc = rootKeyToRootEnc(rootKey);

  // 서브폴더 전환 (있으면 공식 함수 우선)
  if (typeof switchToRootUsingMap === 'function') {
    await switchToRootUsingMap(rootEnc);
  } else if (typeof switchToSubfolderRootLite === 'function') {
    await switchToSubfolderRootLite(rootEnc);
  } else {
    IMAGE_ROOT = ensureSlash(rootEnc);
    try { localStorage.setItem(DETECTED_ROOT_KEY, IMAGE_ROOT); } catch(e){}
  }

  // 제목 갱신
  updateTitleFromRoot(rootEnc);

  // 페이지 이동
  jumpDirect(page, pos || 0);
}
async function goToFavorite(fav){
  const rootEnc = ensureSlash(fav.rootEnc || IMAGE_ROOT || '');
  // 서브폴더 전환(맵 기반 전환 함수가 있으면 우선 사용)
  if (typeof switchToRootUsingMap === 'function') {
    await switchToRootUsingMap(rootEnc);
  } else if (typeof switchToSubfolderRootLite === 'function') {
    await switchToSubfolderRootLite(rootEnc);
  } else {
    IMAGE_ROOT = rootEnc; // 최후 폴백
  }

  // 제목 갱신
  updateTitleFromRoot(rootEnc);

  // 해당 페이지/위치로 점프
  const pos = (typeof fav.pos === 'number') ? fav.pos : 0;
  jumpDirect(fav.page, pos);
}

// ==== 썸네일 크기 상태 & 저장 키 ====

// 저장값 로드
(function loadThumbSize(){
  try{
    const s = localStorage.getItem(THUMB_SIZE_KEY);
    if (s) {
      const obj = JSON.parse(s);
      if (obj && Number.isFinite(obj.w) && Number.isFinite(obj.h)) {
        thumbW = obj.w; thumbH = obj.h;
      }
    }
  } catch(e){}
})();

function saveThumbSize(){
  localStorage.setItem(THUMB_SIZE_KEY, JSON.stringify({ w: thumbW, h: thumbH }));
}

// CSS 변수 적용 + UI 라벨 갱신
function applyThumbSize(){
  document.documentElement.style.setProperty('--thumb-w', thumbW + 'px');
  document.documentElement.style.setProperty('--thumb-h', thumbH + 'px');
  const wLab = document.getElementById('thumbWLabel');
  const hLab = document.getElementById('thumbHLabel');
  if (wLab) wLab.textContent = thumbW;
  if (hLab) hLab.textContent = thumbH;
}

// 크기 변경 후에는 썸네일을 다시 그려서(배치 재계산) 정확히 보이게
function updateThumbSizeAndRerender(){
  applyThumbSize();
  saveThumbSize();
  // 썸네일 배치가 px기반이므로 재계산을 위해 즐겨찾기 영역만 리렌더
  if (typeof renderFavorites === 'function') renderFavorites();
}

// 초기 적용
applyThumbSize();


document.getElementById('thumbWMinus')?.addEventListener('click', () => {
  thumbW = clamp(thumbW - STEP_W, MIN_W, MAX_W);
  updateThumbSizeAndRerender();
});
document.getElementById('thumbWPlus')?.addEventListener('click', () => {
  thumbW = clamp(thumbW + STEP_W, MIN_W, MAX_W);
  updateThumbSizeAndRerender();
});
document.getElementById('thumbHMinus')?.addEventListener('click', () => {
  thumbH = clamp(thumbH - STEP_H, MIN_H, MAX_H);
  updateThumbSizeAndRerender();
});
document.getElementById('thumbHPlus')?.addEventListener('click', () => {
  thumbH = clamp(thumbH + STEP_H, MIN_H, MAX_H);
  updateThumbSizeAndRerender();
});

// 로드
(function loadWtBoxSize(){
  try {
    const s = localStorage.getItem(WTBOX_SIZE_KEY);
    if (s) {
      const o = JSON.parse(s);
      if (o && Number.isFinite(o.h)) wtBoxH = o.h;
    }
  } catch(e){}
})();

// 저장
function saveWtBoxSize(){
  localStorage.setItem(WTBOX_SIZE_KEY, JSON.stringify({ h: wtBoxH }));
}
// 저장값 로드
(function loadFavBoxSize(){
  try{
    const s = localStorage.getItem(FAVBOX_SIZE_KEY);
    if (s) {
      const obj = JSON.parse(s);
      if (obj && Number.isFinite(obj.w) && Number.isFinite(obj.h)) {
        favBoxW = obj.w; favBoxH = obj.h;
      }
    }
  } catch(e){}
})();

function saveFavBoxSize(){
  localStorage.setItem(FAVBOX_SIZE_KEY, JSON.stringify({ w: favBoxW, h: favBoxH }));
}
// CSS 변수 적용 + 라벨 갱신
function applyWtBoxSize(){
  document.documentElement.style.setProperty('--wtbox-h', wtBoxH + 'px');
  const lab = document.getElementById('wtBoxHLabel');
  if (lab) lab.textContent = wtBoxH;
}

// 초기 적용
applyWtBoxSize();
// CSS 변수 적용 + 라벨 갱신
function applyFavBoxSize(){
  document.documentElement.style.setProperty('--favbox-w', favBoxW + 'px');
  document.documentElement.style.setProperty('--favbox-h', favBoxH + 'px');
  const wLab = document.getElementById('favBoxWLabel');
  const hLab = document.getElementById('favBoxHLabel');
  if (wLab) wLab.textContent = favBoxW;
  if (hLab) hLab.textContent = favBoxH;
}

// 초기 적용
applyFavBoxSize();

// 버튼 이벤트
document.addEventListener('DOMContentLoaded', () => {
  const minus = document.getElementById('wtBoxHMinus');
  const plus  = document.getElementById('wtBoxHPlus');

  // 조절 단위/범위는 취향대로
  const STEP = 20;
  const MIN  = 50;
  const MAX  = 3000;

  if (minus) minus.addEventListener('click', () => {
    wtBoxH = Math.max(MIN, wtBoxH - STEP);
    applyWtBoxSize();
    saveWtBoxSize();
  });

  if (plus) plus.addEventListener('click', () => {
    wtBoxH = Math.min(MAX, wtBoxH + STEP);
    applyWtBoxSize();
    saveWtBoxSize();
  });
});

document.getElementById('favBoxWMinus')?.addEventListener('click', () => {
  favBoxW = clamp(favBoxW - STEP_FW, MIN_FW, MAX_FW);
  applyFavBoxSize(); saveFavBoxSize();
});
document.getElementById('favBoxWPlus')?.addEventListener('click', () => {
  favBoxW = clamp(favBoxW + STEP_FW, MIN_FW, MAX_FW);
  applyFavBoxSize(); saveFavBoxSize();
});
document.getElementById('favBoxHMinus')?.addEventListener('click', () => {
  favBoxH = clamp(favBoxH - STEP_FH, MIN_FH, MAX_FH);
  applyFavBoxSize(); saveFavBoxSize();
});
document.getElementById('favBoxHPlus')?.addEventListener('click', () => {
  favBoxH = clamp(favBoxH + STEP_FH, MIN_FH, MAX_FH);
  applyFavBoxSize(); saveFavBoxSize();
});

// 기존: buildSeamlessThumb(thumb, page, pos, rootEnc)
// 변경: rootKey도 받도록 (자동 판별)
function buildSeamlessThumb(thumb, page, pos, rootKey) {
  const myReqId = ++THUMB_REQ_SEQ;            // 이 호출의 버전 토큰
  thumb.dataset.reqId = String(myReqId);

  // 0~1로 고정
  const clamp01 = (v) => Math.max(0, Math.min(1, +v || 0));
  pos = clamp01(pos);

  const sizeReady = () => {
    // 보이는 상태 + 유효한 레이아웃인지
    const r = thumb.getBoundingClientRect();
    return r.width > 0 && r.height > 0;
  };

  const getSize = () => {
    const r = thumb.getBoundingClientRect();
    return { tw: Math.round(r.width), th: Math.round(r.height) };
  };

  // 이미지 로더 (타임아웃/에러 처리)
  const loadImage = (src, timeoutMs = 15000) => new Promise((resolve, reject) => {
    const img = new Image();
    img.decoding = 'async';
    let tid = setTimeout(() => {
      img.src = ''; // 중단
      reject(new Error('thumb load timeout: ' + src));
    }, timeoutMs);
    img.onload = () => { clearTimeout(tid); resolve(img); };
    img.onerror = (e) => { clearTimeout(tid); reject(e); };
    img.src = src;
  });

  const srcFor = (p) => rootKey ? getImageSrcForRoot(rootKey, p) : getImageSrc(p);

  const placeImage = (imgEl, tw, th, topPx) => {
    const iw = imgEl.naturalWidth || 1;
    const ih = imgEl.naturalHeight || 1;
    const scale = Math.max(tw / iw, th / ih); // cover
    const sw = Math.round(iw * scale);
    const sh = Math.round(ih * scale);
    const left = Math.round((tw - sw) / 2);

    Object.assign(imgEl.style, {
      position: 'absolute',
      left:     left + 'px',
      top:      Math.round(topPx) + 'px',
      width:    sw + 'px',
      height:   sh + 'px',
      maxWidth: 'none',
      maxHeight:'none'
    });
    return { sw, sh, left };
  };

  // 레이아웃이 준비될 때까지 대기 (접혀있을 때 무한 rAF 방지)
  const waitLayout = (tries = 40) => new Promise((resolve, reject) => {
    const tick = () => {
      // 요청이 취소되었으면 종료
      if (thumb.dataset.reqId !== String(myReqId)) return resolve('stale');
      if (sizeReady()) return resolve();
      if (tries-- <= 0) return reject('no-size');
      requestAnimationFrame(tick);
    };
    tick();
  });

  // 크기 변경에 반응해 재빌드 (선택)
  let ro;
  try {
    ro = new ResizeObserver(() => {
      // 다른 요청이 이미 시작되었으면 무시
      if (thumb.dataset.reqId !== String(myReqId)) return;
      // 크기 바뀌면 다시 빌드
      buildSeamlessThumb(thumb, page, pos, rootKey);
    });
    ro.observe(thumb);
  } catch {}

  (async () => {
    try {
      // 1) 레이아웃 준비
      await waitLayout();
      if (thumb.dataset.reqId !== String(myReqId)) return;

      // 2) 초기화 & 스타일
      thumb.innerHTML = '';
      Object.assign(thumb.style, {
        position: 'relative',
        overflow: 'hidden'
      });
      const { tw, th } = getSize();

      // 3) 첫 이미지 로드 (실패 시 플레이스홀더)
      let img1;
      try {
        img1 = await loadImage(srcFor(page));
      } catch (e) {
        if (thumb.dataset.reqId !== String(myReqId)) return;
        // 플레이스홀더
        const ph = document.createElement('div');
        ph.textContent = '…';
        Object.assign(ph.style, {
          position: 'absolute', inset: '0',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#777', fontSize: '12px', background: '#111'
        });
        thumb.appendChild(ph);
        return; // 첫 장 없으면 다음 잇기 의미 없음
      }
      if (thumb.dataset.reqId !== String(myReqId)) return;

      // 4) 첫 이미지 배치
      const scale1 = Math.max(tw / (img1.naturalWidth||1), th / (img1.naturalHeight||1));
      const sh1 = Math.round((img1.naturalHeight||1) * scale1);
      const top1 = -(pos * sh1);
      placeImage(img1, tw, th, top1);
      thumb.appendChild(img1);
      if (thumb.dataset.reqId !== String(myReqId)) return;

      // 5) 남은 공간이 있으면 다음 장 윗부분 이어 붙이기
      const visibleTop = Math.max(0, -top1);         // 첫 이미지에서 위쪽 잘려나간 픽셀
      const visible1   = Math.max(0, Math.min(th, sh1 - visibleTop));
      const remain     = th - visible1;

      if (remain > 0 && typeof totalImages === 'number' && page + 1 <= totalImages) {
        try {
          const img2 = await loadImage(srcFor(page + 1));
          if (thumb.dataset.reqId !== String(myReqId)) return;
          // 바로 아래에 1px 겹치게
          const top2 = top1 + sh1 - 1;
          placeImage(img2, tw, th, top2);
          thumb.appendChild(img2);
        } catch(e) {
          // 두 번째는 실패해도 무시
        }
      }
    } finally {
      // 옵저버 정리 (최신 요청이 아니면 기존 옵저버가 남지 않도록)
      try { ro && ro.disconnect(); } catch {}
    }
  })();
}

function scrollImageToPosition(imgEl, pos) {
  if (!imgEl) return;

  const doScroll = () => {
    const rect   = imgEl.getBoundingClientRect();
    const imgTop = window.scrollY + rect.top;
    const targetY = imgTop + (imgEl.clientHeight * pos) - 20; // 여유 20px
    window.scrollTo({ top: targetY, behavior: 'auto' });

    // ✅ 한 번만 적용
    if (_pendingPos) { _pendingPos.applied = true; _pendingPos = null; }
  };

  const whenReady = () => {
    if (imgEl.complete && imgEl.naturalHeight > 0 && imgEl.clientHeight > 0) {
      requestAnimationFrame(doScroll);
    } else {
      // 로드 완료 시 1회만 스크롤
      imgEl.addEventListener('load', () => requestAnimationFrame(doScroll), { once: true });
      // 혹시 load 이벤트를 놓친 경우 대비한 보정(선택)
      setTimeout(() => {
        if (imgEl.clientHeight > 0) requestAnimationFrame(doScroll);
      }, 100);
    }
  };

  whenReady();
}

// 점프(즐겨찾기용): 현재 함수 재사용 + 입력창 업데이트
function jumpDirect(page, pos = 0){
  pageInput.value = page;
  _pendingPos = { page, pos: Math.min(1, Math.max(0, +pos || 0)), applied: false };
  jumpToPage();
}

// 추가
function addFavoriteByPage(page, name = "", pos = 0){
  page = parseInt(page, 10);
  if (!Number.isFinite(page) || page < 1 || page > totalImages) return;

  pos = Math.min(1, Math.max(0, +pos || 0));

  const curKey = makeRootKey(ensureSlash(IMAGE_ROOT || '')); // ★ 맵 키로 저장

  // 기존 addFavoriteByPage 안의 push 부분 교체
  const curRootKey = (typeof makeRootKey === 'function')
    ? makeRootKey(ensureSlash(IMAGE_ROOT || folder || ''))
    : null;

  // 중복: page+name+pos+rootKey 같은 항목 방지
  if (favorites.some(f =>
    f.page === page &&
    (f.name || "") === (name || "") &&
    Math.abs((f.pos || 0) - pos) < 1e-3 &&
    f.rootKey === curKey
  )) return;

  favorites.push({ name, page, pos, rootKey: curRootKey });
  saveFavorites();
  renderFavorites();
}


// 버튼: 수동 추가(+추가)
document.getElementById('favAddBtn').addEventListener('click', () => {
  const pageStr = prompt("페이지 번호를 입력하세요 (필수)", "");
  if (pageStr === null) return;
  const page = parseInt(pageStr, 10);
  if (!Number.isFinite(page) || page < 1 || page > totalImages) {
    alert("올바른 페이지 번호가 아닙니다.");
    return;
  }
  const name = prompt("이름(선택, 비워도 됨)", "") || "";
  addFavoriteByPage(page, name.trim());
});

// 버튼: 기본 복원
document.getElementById('favResetBtn').addEventListener('click', () => {
  if (!confirm("즐겨찾기를 기본값으로 되돌릴까요? (현재 항목은 사라집니다)")) return;
  favorites = [...DEFAULT_FAVORITES];
  saveFavorites();
  renderFavorites();
});

// Alt+클릭으로 이미지 추가
container.addEventListener('click', (e) => {
  const target = e.target;
  if (!(target && target.tagName === 'IMG')) return;
  if (!e.altKey) return; // Alt 키 조건

  // 페이지 번호 추출
  let page = NaN;
  if (target.id && target.id.startsWith('page_')) {
    page = parseInt(target.id.slice(5), 10);
  }
  if (!Number.isFinite(page)) {
const m = target.src.match(IMAGE_FILENAME_JPG_REGEX);
if (m) {
  const fileNo = parseInt(m[1], 10);
  page = pageFromFileNo(fileNo);    // ★ 파일번호 → UI페이지
}
  }
  if (!Number.isFinite(page)) { alert("페이지 번호를 인식하지 못했습니다."); return; }

  // 클릭 위치 → 비율(0~1)
  const r = target.getBoundingClientRect();
  let pos = (e.clientY - r.top) / r.height;
  pos = Math.min(1, Math.max(0, pos));

  const name = prompt(`이 페이지(${page})의 이름(선택)을 입력하세요\n(저장 위치: 약 ${Math.round(pos*100)}%)`, "") || "";
  addFavoriteByPage(page, name.trim(), pos);
});

// 초기화
loadFavorites();       // 즐겨찾기 배열
loadFavSort();         // 정렬 상태
loadFavView();         // ✅ 보기 상태
updateSortButtonsUI(); // 정렬 버튼 라벨
updateViewButtonsUI(); // ✅ 보기 버튼 라벨
renderFavorites();     // 정렬/보기 상태 반영하여 렌더


// 보기 버튼 이벤트
document.getElementById('favViewThumb').addEventListener('click', () => {
  favViewMode = 'thumb';
  saveFavView();
  renderFavorites();
});
document.getElementById('favViewText').addEventListener('click', () => {
  favViewMode = 'text';
  saveFavView();
  renderFavorites();
});
// 정렬 버튼 이벤트
document.getElementById('favSortName').addEventListener('click', () => {
  if (favSortBy === 'name') {
    favSortAsc = !favSortAsc; // 같은 버튼 다시 누르면 방향 토글
  } else {
    favSortBy = 'name';
    favSortAsc = true;        // 기본 오름차순
  }
  saveFavSort();
  renderFavorites();
});

document.getElementById('favSortPage').addEventListener('click', () => {
  if (favSortBy === 'page') {
    favSortAsc = !favSortAsc;
  } else {
    favSortBy = 'page';
    favSortAsc = true;
  }
  saveFavSort();
  renderFavorites();
});

/* ===== 현재 페이지 트래킹 (UI 페이지 기준) ===== */
let currentPage = 1; // UI 페이지는 항상 1부터 시작 (FIRST_INDEX와 무관)
const currentPageEl = document.getElementById('currentPage');
const pageInputEl   = document.getElementById('pageInput');

/** UI의 현재 페이지를 일관되게 갱신 */
function setCurrentPage(page, { updateInput = true, silent = false } = {}) {
  // 정수/범위 보정
  let p = parseInt(page, 10);
  if (!Number.isFinite(p)) p = 1;
  if (typeof totalImages === 'number') {
    p = Math.max(1, Math.min(totalImages, p));
  }

  if (currentPage !== p) {
    currentPage = p;
    if (currentPageEl) currentPageEl.textContent = String(p);
    if (updateInput && pageInputEl && document.activeElement !== pageInputEl) {
      pageInputEl.value = String(p);
      if (pageInputEl.max !== String(totalImages)) pageInputEl.max = String(totalImages);
    }
    if (!silent) {
      // 필요 시 여기에 onPageChange 훅을 달아도 됨
      // e.g., console.debug('[setCurrentPage]', p);
    }
  } else {
    // 값이 같아도 표시는 보정
    if (currentPageEl) currentPageEl.textContent = String(p);
    if (updateInput && pageInputEl && document.activeElement !== pageInputEl) {
      pageInputEl.value = String(p);
      if (pageInputEl.max !== String(totalImages)) pageInputEl.max = String(totalImages);
    }
  }
}

/** 초기값 설정 (필요하면 URL 해시 등으로 시작 페이지 복원 가능) */
function initCurrentPage() {
  // URL 해시(#p=12)로 시작 페이지를 주고 싶다면:
  // const m = location.hash.match(/(?:^|[?#&])p=(\d+)/);
  // const start = m ? parseInt(m[1], 10) : 1;
  const start = 1;
  setCurrentPage(start, { updateInput: true, silent: true });
}

// 초기 실행
initCurrentPage();

function computeCurrentPage() {
  // 가로 모드에서는 스크롤 기반 페이지 추적이 의미가 없으므로 스킵
  if (typeof viewMode !== 'undefined' && viewMode === 'horizontal') return;

  const imgs = container.querySelectorAll('img');
  if (!imgs.length) return;

  const topLine = 10; // 뷰포트 상단에서 10px 아래 기준선
  let bestImg = null;
  let bestDist = Infinity;

  imgs.forEach(img => {
    const r = img.getBoundingClientRect();
    const d = Math.abs(r.top - topLine);
    if (d < bestDist) {
      bestDist = d;
      bestImg = img;
    }
  });

  if (!bestImg) return;

  let page = NaN;

  // 1) id="page_###" → 이미 UI 페이지 번호
  const id = bestImg.id;
  if (id && id.startsWith('page_')) {
    page = parseInt(id.slice(5), 10);
  }

  // 2) fallback: src에서 파일번호 추출 → UI 페이지로 변환
  if (!Number.isFinite(page)) {
    const m = bestImg.src && IMAGE_FILENAME_JPG_REGEX && bestImg.src.match(IMAGE_FILENAME_JPG_REGEX);
    if (m) {
      const fileNo = parseInt(m[1], 10);
      if (Number.isFinite(fileNo)) {
        page = pageFromFileNo(fileNo); // ★ 핵심: 파일번호 → UI 페이지
      }
    }
  }

  if (Number.isFinite(page)) {
    // 안전 범위로 클램프
    if (typeof totalImages === 'number') {
      page = Math.max(1, Math.min(totalImages, page));
    }

    if (currentPage !== page) {
      currentPage = page;
      if (currentPageEl) currentPageEl.textContent = page;
      const pi = document.getElementById('pageInput');
      if (pi && document.activeElement !== pi) {
        // 입력 중일 땐 덮어쓰지 않도록 배려
        pi.value = String(page);
      }
    }
  }
}

// 스크롤/리사이즈 시 과도 호출 방지: rAF로 스로틀링
let ticking = false;
function onScrollOrResize() {
  if (!ticking) {
    ticking = true;
    requestAnimationFrame(() => {
      computeCurrentPage();
      ticking = false;
    });
  }
}
window.addEventListener('scroll', onScrollOrResize, { passive: true });
window.addEventListener('resize', onScrollOrResize);

// 점프/배치 로드 후에도 갱신
const _origLoadNextBatch = loadNextBatch;
loadNextBatch = function() {
  if (viewMode !== 'vertical') return; // 가로모드에선 배치 로딩 중단
  _origLoadNextBatch();
  requestAnimationFrame(() => {
    if (_pendingPos && _pendingPos.page) {
      const img = document.getElementById(`page_${_pendingPos.page}`);
      if (img) scrollImageToPosition(img, _pendingPos.pos || 0);
    }
  });
};
const _origJumpToPage = jumpToPage;
jumpToPage = function() {
  _origJumpToPage();
  // 점프 직후 현재페이지는 입력값과 동일하도록 반영
  const p = parseInt(pageInput.value, 10);
  if (Number.isFinite(p)) {
    currentPage = p;
    currentPageEl.textContent = p;
  }
  requestAnimationFrame(() => {
  if (_pendingPos && _pendingPos.page) {
    const img = document.getElementById(`page_${_pendingPos.page}`);
    if (img) scrollImageToPosition(img, _pendingPos.pos || 0);
  }
});
};

// 초기 계산
requestAnimationFrame(() => computeCurrentPage());

/* ===== 이미지 클릭 시 페이지 토스트 ===== */
// Alt+클릭은 이미 즐겨찾기 추가로 쓰고 있으니, "일반 클릭"은 페이지 번호 토스트 표시로 사용
const toastEl = document.getElementById('toast');
let toastTimer = null;

function showToast(text, ms = 900) {
  toastEl.textContent = text;
  toastEl.style.display = 'block';
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => {
    toastEl.style.display = 'none';
  }, ms);
}

container.addEventListener('click', (e) => {
  const t = e.target;
  if (!(t && t.tagName === 'IMG')) return;
  if (e.altKey) return; // Alt는 즐겨찾기 추가용으로 이미 사용 중

 // ✅ 가로 모드에서는 페이지 정보 토스트를 띄우지 않음
 if (typeof viewMode !== 'undefined' && viewMode === 'horizontal') return;

  // 이 이미지의 페이지 추출
  let p = NaN;
  if (t.id && t.id.startsWith('page_')) {
    p = parseInt(t.id.slice(5), 10);
  }
  if (!Number.isFinite(p)) {
    const m = t.src.match(IMAGE_FILENAME_JPG_REGEX);
    if (m) p = parseInt(m[1], 10);
  }
  if (Number.isFinite(p)) {
    showToast(`페이지 ${p}`);
  }
});

/* ===== 현재 페이지를 즐겨찾기에 바로 추가 ===== */
const favAddCurrentBtn = document.getElementById('favAddCurrent');
if (favAddCurrentBtn) {
  favAddCurrentBtn.addEventListener('click', () => {
    if (!Number.isFinite(currentPage)) {
      alert('현재 페이지를 인식하지 못했습니다.');
      return;
    }
    const name = prompt(`현재 페이지(${currentPage})의 이름(선택)을 입력하세요`, "") || "";
    addFavoriteByPage(currentPage, name.trim());
  });
}
/* ========== 페이지 컨트롤 숨기기/보이기 ========== */
const pageBox = document.getElementById('pageJumpBox');
const hideBtn = document.getElementById('toggleBoxBtn');
const showBtn = document.getElementById('showBoxBtn');

hideBtn.addEventListener('click', () => {
  pageBox.classList.add('hiddenBox');
  showBtn.style.display = 'block';
});

showBtn.addEventListener('click', () => {
  pageBox.classList.remove('hiddenBox');
  showBtn.style.display = 'none';
});

/* ========== 전체화면 토글 ========== */
const fullBtn = document.getElementById('toggleFullBtn');

function applyFullUI(){
  const on = !!document.fullscreenElement;
  fullBtn.textContent = on ? '전체' : '전체';
  setBtnPressed(fullBtn, on);                     // 활성 표시
}

async function toggleFullscreen() {
  if (!document.fullscreenElement) {
    try { await document.documentElement.requestFullscreen(); }
    catch { alert('전체화면 전환이 지원되지 않습니다.'); }
  } else {
    await document.exitFullscreen();
  }
  // applyFullUI()는 fullscreenchange에서 일괄 반영
}
fullBtn.addEventListener('click', toggleFullscreen);
// 전체화면 변화 감지하여 UI 동기화
document.addEventListener('fullscreenchange', applyFullUI);


// 자동 탐지/마지막찾기 자동실행: 로컬키 없을 때만
(function autoDetectOnFirstLoad() {
  // TOTAL은 map 기준, PAD/EXT는 기존 localStorage 기준
  const cfg = getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {};
  const hasTotal = Number.isFinite(cfg.total);
  const hasPadMap = Number.isFinite(cfg.pad);
  const hasExtMap = typeof cfg.ext === 'string' && !!cfg.ext;

  
  let _running = false;

  // ✅ 로딩 배너 제어
  const startLoading = (msg) => {
    try {
      if (!loadingIndicator) return;
      loadingIndicator.classList.remove('done');
      loadingIndicator.classList.add('searching');
      loadingIndicator.style.display = 'block';
      loadingIndicator.textContent = msg || '';
    } catch(e){}
  };
  const setLoading = (msg) => {
    try { if (loadingIndicator) loadingIndicator.textContent = msg || ''; } catch(e){}
  };
  const finishLoading = (finalMsg) => {
    try {
      if (!loadingIndicator) return;
      if (finalMsg) loadingIndicator.textContent = finalMsg;
      loadingIndicator.classList.remove('searching');
      loadingIndicator.classList.add('done');
      setTimeout(() => {
        if (!loadingIndicator) return;
        loadingIndicator.style.display = 'none';
        loadingIndicator.classList.remove('done');
        loadingIndicator.textContent = '';
      }, 650);
    } catch(e){}
  };

    async function runAuto() {
    if (_running) return;
    _running = true;

    try {
    //️ 가장 알맞은 cfg를 고르는 헬퍼 (루트 후보를 순회)
    const uniq = (arr) => Array.from(new Set(arr.filter(Boolean).map(s => ensureSlash(s))));
    const rootsToTry = uniq([
      typeof IMAGE_ROOT === 'string' && IMAGE_ROOT,
      typeof folder === 'string' && folder,
      typeof IMAGE_ROOT === 'string' && buildSubfolderRoot(IMAGE_ROOT),
      typeof folder === 'string' && buildSubfolderRoot(folder),
    ]);

    let picked = null;
    for (const r of rootsToTry) {
      const c = getCfgFor(r, FILE_PREFIX || '') || null;
      if (c && (Number.isFinite(c.total) || Number.isFinite(c.pad) || (typeof c.ext === 'string' && c.ext))) {
        picked = { root: r, cfg: c };
        break;
      }
    }

    const cfg = picked ? picked.cfg : (getCfgFor(IMAGE_ROOT, FILE_PREFIX || '') || {});
    const hasTotal  = Number.isFinite(cfg.total);
    const hasPadMap = Number.isFinite(cfg.pad);
    const hasExtMap = typeof cfg.ext === 'string' && !!cfg.ext;

    if (hasTotal && hasPadMap && hasExtMap) {
      console.info('[autoDetect] 이미 저장된 값이 있어 자동실행하지 않습니다.');
      _running = false;
      return;
    }

      startLoading('자동 탐지: 파일명/확장자 검사 중...');

      const det = (typeof detectPadExt === 'function')
        ? await detectPadExt({ timeout: 3000, delay: 120, verbose: true })
        : null;

      const detectedOk = det && (det.fromStorage === true || Number.isFinite(det.sampleIndex));
      if (!detectedOk) {
        console.warn('[autoDetect] detectPadExt 실패 또는 미정 — 자동 마무리', det);
        finishLoading('자동 탐지 실패');
        return;
      }

      setLoading('자동 탐지: 마지막 이미지 번호 찾는 중...');

      // 내부 로더가 배너를 건드리지 않게 updateUI:false
      const res = await findLastImageIndex({
        start: 1000,
        timeout: 4000,
        delay: 150,
        maxIndex: 2000000,
        verbose: true,
        updateUI: false
      });

      const last = res && Number.isFinite(res.lastIndex) ? res.lastIndex : null;
      if (last && last > 0) {
        // map에 저장 (setTotalImages가 map persist 담당)
        setTotalImages(last, { persist: true, updateUI: true });

        finishLoading(`자동 탐지 완료: 총 ${last}장`);
        setTimeout(() => { try { window.location.reload(); } catch(e){ console.warn('자동 새로고침 실패', e); } }, 150);
      } else {
        console.warn('[autoDetect] 마지막 이미지 번호를 얻지 못함:', res);
        finishLoading('자동 탐지 실패');
      }
    } catch (e) {
      console.error('[autoDetect] 에러:', e);
      finishLoading('자동 탐지 실패');
    } finally {
      _running = false;
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', runAuto, { once:true });
  } else {
    setTimeout(runAuto, 120);
  }
})();

// === LocalStorage 뷰어 ===
(function(){
  const $ = (s) => document.querySelector(s);
  const panel = $('#lsPanel');
  const overlay = $('#lsOverlay');
  const tbody = $('#lsTbody');
  const search = $('#lsSearch');
  const openBtn = $('#lsOpenBtn');
  const btnRefresh = $('#lsRefresh');
  const btnClose = $('#lsClose');
  const btnClearAll = $('#lsClearAll');

  function openLS(){
    renderLS();
    overlay.style.display = 'block';
    panel.style.display = 'block';
    // 포커스
    setTimeout(()=>search.focus(), 0);
  }
  function closeLS(){
    overlay.style.display = 'none';
    panel.style.display = 'none';
  }

  function getEntries(){
    const arr = [];
    for (let i=0; i<localStorage.length; i++){
      const k = localStorage.key(i);
      try{
        const v = localStorage.getItem(k);
        arr.push([k, v]);
      }catch(e){
        arr.push([k, '(읽기 오류)']);
      }
    }
    // 파일별 네임스페이스가 있다면 보기 좋게 정렬
    arr.sort((a,b)=> a[0].localeCompare(b[0], 'ko', {sensitivity:'base'}));
    return arr;
  }

  function renderLS(){
    const q = (search.value || '').toLowerCase();
    const rows = getEntries()
      .filter(([k,v]) => {
        if (!q) return true;
        return (k && k.toLowerCase().includes(q)) || (v && v.toLowerCase && v.toLowerCase().includes(q));
      })
      .map(([k,v]) => {
        const tr = document.createElement('tr');

        const tdK = document.createElement('td'); tdK.className = 'k'; tdK.textContent = k;
        const tdV = document.createElement('td'); tdV.className = 'v'; tdV.textContent = v;

        const tdA = document.createElement('td'); tdA.className = 'a';

        const btnCopy = document.createElement('button');
        btnCopy.className = 'lsActionBtn'; btnCopy.title = '값 복사'; btnCopy.textContent = '복';
        btnCopy.addEventListener('click', async () => {
          try {
            await navigator.clipboard.writeText(v ?? '');
            toast('복사됨');
          } catch(e){ alert('복사 실패'); }
        });

        const btnDel = document.createElement('button');
        btnDel.className = 'lsActionBtn'; btnDel.title = '키 삭제'; btnDel.textContent = '삭';
        btnDel.addEventListener('click', () => {
          if (!confirm(`이 키를 삭제할까요?\n${k}`)) return;
          try {
            localStorage.removeItem(k);
            renderLS();
          } catch(e){ alert('삭제 실패'); }
        });

        tdA.appendChild(btnCopy);
        tdA.appendChild(btnDel);

        tr.appendChild(tdK);
        tr.appendChild(tdV);
        tr.appendChild(tdA);
        return tr;
      });

    tbody.innerHTML = '';
    rows.forEach(tr => tbody.appendChild(tr));

    if (rows.length === 0){
      const tr = document.createElement('tr');
      const td = document.createElement('td');
      td.colSpan = 3;
      td.style.opacity = .7;
      td.textContent = '항목이 없습니다.';
      tr.appendChild(td);
      tbody.appendChild(tr);
    }
  }

  function toast(msg){
    // 기존 토스트가 있으면 그걸 재사용
    const el = document.getElementById('toast');
    if (!el) return alert(msg);
    el.textContent = msg; el.style.display = 'block';
    setTimeout(()=>{ el.style.display = 'none'; }, 900);
  }

  // 이벤트 바인딩
  if (openBtn) openBtn.addEventListener('click', openLS);
  overlay.addEventListener('click', closeLS);
  btnClose.addEventListener('click', closeLS);
  btnRefresh.addEventListener('click', renderLS);
  btnClearAll.addEventListener('click', () => {
    if (!confirm('정말 로컬스토리지를 모두 삭제할까요? 이 동작은 되돌릴 수 없습니다.')) return;
    try { localStorage.clear(); renderLS(); } catch(e){ alert('삭제 실패'); }
  });
  search.addEventListener('input', renderLS);

  // ESC로 닫기
  document.addEventListener('keydown', (e)=>{
    if (panel.style.display === 'block' && e.key === 'Escape') closeLS();
  });
})();
/** map 에서 현 타이틀(메인 폴더 계열)만 추출해 select 옵션으로 만든다 */
function getSubsFromMapForThisTitle(){
  const map = loadCfgMap();
  const subs = [];
  // 이 타이틀의 "메인 루트(디코딩)"을 만든다
  const mainDecoded = decodeURIComponent(ensureSlash(mainFolderRaw));
  // 이 타이틀에 속하는지: 키를 디코딩해 mainDecoded 로 시작하는지 체크
  for (const [k, rec] of Object.entries(map)){
    const decodedPath = decodeMapKeyToPath(k);  // 디코딩 경로(끝에 /)
    if (!decodedPath.startsWith(mainDecoded)) continue;
    // 라벨은 main 이후의 상대경로
    const relDecoded = decodedPath.slice(mainDecoded.length);
    subs.push({
      // 인코딩된 풀 루트(이미지 로딩용)
      rootEnc: toEncodedRootFromDecodedPath(decodedPath),
      // 보이는 라벨은 디코딩된 상대경로
      label: relDecoded.replace(/\/+$/,'') || '(메인)',
      // 메타(있으면 바로 써먹기)
      pad: rec && Number.isFinite(rec.pad) ? rec.pad : undefined,
      ext: rec && typeof rec.ext === 'string' ? rec.ext : undefined,
      total: rec && Number.isFinite(rec.total) ? rec.total : undefined,
      first: rec && Number.isFinite(rec.first) ? rec.first : undefined
    });
  }

  // 메인 항목이 없으면 강제로 하나 추가(메타 없음)
  const mainEnc = ensureSlash(mainFolder);
  if (!subs.some(s => ensureSlash(s.rootEnc) === ensureSlash(mainEnc))) {
    subs.unshift({
      rootEnc: mainEnc,
      label: '(메인)'
    });
  }

  // 보기 좋게 정렬(메인을 맨 위로 두고, 나머지는 사람친화적으로)
  const [main, rest] = [
    subs.filter(s => ensureSlash(s.rootEnc) === ensureSlash(mainEnc)),
    subs.filter(s => ensureSlash(s.rootEnc) !== ensureSlash(mainEnc))
  ];
  rest.sort((a,b) => a.label.localeCompare(b.label,'ko',{numeric:true,sensitivity:'base'}));
  return [...main, ...rest];
}

/** 전환(= IMAGE_ROOT 교체 + 메타 적용 + UI 리로드). DETECTED_ROOT_KEY 저장 없음 */
async function switchToRootUsingMap(fullRootEnc){
  IMAGE_ROOT = ensureSlash(fullRootEnc);        // ★ 인코딩된 풀 경로 그대로
  loadPrefixFromCfg(IMAGE_ROOT);                // 접두어 있으면 반영
  rebuildFilenameRegex?.();

  // 맵에서 메타를 읽어 바로 반영(있으면 바로 적용, 없으면 탐지)
  const map = loadCfgMap();
  const kDecoded = decodeMapKeyToPath(makeRootKey(decodeURIComponent(IMAGE_ROOT)));
  const rec = map[`[${kDecoded}]`] || null;

  // pad/ext/first/total 빠르게 적용
  if (rec && Number.isFinite(rec.pad)) PAD = rec.pad;
  if (rec && typeof rec.ext === 'string') IMAGE_EXT = rec.ext;
  if (rec && Number.isFinite(rec.first)) FIRST_INDEX = rec.first;

  if (rec && Number.isFinite(rec.total)) {
    setTotalImages(rec.total, { persist:false, updateUI:true });
  } else {
    // 메타가 없으면 가볍게 탐지
    try { await detectPadExt?.({ timeout:2000, delay:100, verbose:false, trySubfolderOnFail:false }); } catch(e){}
    // total은 빠져있을 수 있으므로 findLastImageIndex 또는 기존 total 유지
    // 무거우면 생략하고, 필요 시 사용자 버튼으로 찾게 둬도 됨
  }

  // 화면 다시 로드
  const startPage = 1;
  setCurrentPage(startPage, { updateInput:true, silent:true });
  container.innerHTML = '';
  if (viewMode === 'horizontal') {
    await showHorizontalPage(startPage);
  } else {
    loaded = Math.max(0, startPage-1);
    window.scrollTo({ top: 0, behavior: 'auto' });
    loadNextBatch();
  }
}

/** select UI 달기 (태그로 존재할 때만 초기화) */
(function initSubSelectFromMap(){
  document.addEventListener('DOMContentLoaded', () => {
    const sel = document.getElementById('subfolderSelect');
    if (!sel) return; // 페이지에 없으면 아무 것도 안 함

    function refresh(){
      const subs = getSubsFromMapForThisTitle();
      sel.innerHTML = '';

      // 프롬프트
      const opt0 = document.createElement('option');
      opt0.value = '';
      opt0.textContent = subs.length > 1 ? '서브폴더' : '서브폴더';
      sel.appendChild(opt0);

      // 옵션 채우기
      subs.forEach(s => {
        const o = document.createElement('option');
        o.value = ensureSlash(s.rootEnc);      // value = 인코딩된 풀 루트
        o.textContent = s.label;
        sel.appendChild(o);
      });

      // 현재 ROOT 선택 반영
      const cur = ensureSlash(IMAGE_ROOT || '');
      const found = [...sel.options].find(o => ensureSlash(o.value) === cur);
      sel.value = found ? found.value : '';
    }

    sel.addEventListener('change', async (e) => {
      const picked = e.target.value;           // 인코딩된 "풀 루트"
      if (!picked) return;

      // 1) 루트 전환 (PAD/EXT/total 재적용 + 이미지 리렌더)
      await switchToRootUsingMap(ensureSlash(picked));

      // 2) 제목 갱신 (선택한 서브폴더명으로)
      updateTitleFromRoot(picked);

      // 3) 선택값 재반영
      refresh();

	  // ✅ 셀렉트 포커스 제거 (이제 PageDown이 셀렉트를 움직이지 않음)
      sel.blur();
      // (선택) 특정 요소로 포커스 보내기
      // document.getElementById('pageInput')?.focus();
      // container?.focus(); // container에 tabindex="0" 이 있으면 가능
    });

    // 최초 렌더 + 전체스캔 후 갱신 훅
    refresh();
    document.addEventListener('subs:changed', refresh);
  });
})();
// 선택된 루트(인코딩)에서 사람용 제목을 뽑아 헤더/탭에 반영
function updateTitleFromRoot(rootEnc) {
  try {
    const rootDec = decodeURIComponent(ensureSlash(rootEnc));
    const mainDec = decodeURIComponent(ensureSlash(mainFolder)); // 예: "[작품]/"
    let label = rootDec.startsWith(mainDec)
      ? rootDec.slice(mainDec.length).replace(/\/+$/,'') // "피의 흔적 4화"
      : rootDec.replace(/\/+$/,'');

    if (!label) label = baseName;

    document.title = label;
    const h1 = document.getElementById('bookTitle');
    const hInline = document.getElementById('bookTitleInline');
    if (h1) h1.textContent = label;
    if (hInline) hInline.textContent = label;
  } catch {
    document.title = baseName;
    const h1 = document.getElementById('bookTitle');
    const hInline = document.getElementById('bookTitleInline');
    if (h1) h1.textContent = baseName;
    if (hInline) hInline.textContent = baseName;
  }
}
// 간단 이동 헬퍼: n화로 전환
function setSubfolder(n) {
  subfolderNumber = parseInt(n, 10);
  if (!Number.isFinite(subfolderNumber) || subfolderNumber < 1) subfolderNumber = 1;

  subfolderExists = true; // <- 여기서 켭니다

  // 폴더 경로 재계산
  const subfolderNameRaw = `${baseName} ${subfolderNumber}${subfolderSuffix}`; // 예: "피의 흔적 4화"
  const subfolderName    = ensureSlash(subfolderNameRaw);
  const subfolderEncoded = encodeURI(subfolderName);

  folder = ensureSlash(mainFolder) + subfolderEncoded; // 최종 폴더 (인코딩된 서브 결합)

  // 제목 즉시 반영
  const effectiveTitle = `${baseName} ${subfolderNumber}${subfolderSuffix}`;
  document.title = effectiveTitle;
  const h1 = document.getElementById('bookTitle');
  const hInline = document.getElementById('bookTitleInline');
  if (h1) h1.textContent = effectiveTitle;
  if (hInline) hInline.textContent = effectiveTitle;

  // 이미지 다시 로드(세로/가로 모드 공통 최소치)
  container.innerHTML = '';
  loaded = 0;
  if (typeof setCurrentPage === 'function') setCurrentPage(1, { updateInput: true });
  if (typeof loadNextBatch === 'function' && viewMode === 'vertical') {
    loadNextBatch();
    window.scrollTo({ top: 0, behavior: 'auto' });
  } else if (typeof showHorizontalPage === 'function') {
    showHorizontalPage(1);
  }
}
// 접기 버튼 추가 & 동작
(function initFoldRestToggle(){
  document.addEventListener('DOMContentLoaded', () => {
    const box = document.getElementById('pageJumpBox');
    const hideBtn = document.getElementById('toggleBoxBtn');
    if (!box || !hideBtn) return;

    // 버튼 만들기 (숨기기 버튼 옆)
    const foldBtn = document.createElement('button');
    foldBtn.id = 'foldRestBtn';
    foldBtn.className = 'zoomBtn';
    foldBtn.title = '첫 줄과 즐겨찾기만 남기고 나머지를 접습니다';
    foldBtn.style.marginLeft = '4px';
    hideBtn.insertAdjacentElement('afterend', foldBtn);
// 첫째/둘째 줄을 접기 예외로 표시
const row1 = box.children[0];
const row2 = box.children[1];
row1 && row1.classList.add('keep-on-fold');
row2 && row2.classList.add('keep-on-fold');

// (선택) 버튼 설명도 업데이트
foldBtn.title = '첫째/둘째 줄과 즐겨찾기/목록만 남기고 나머지를 접습니다';
    // 로컬스토리지 키 (파일 네임스페이스가 있다면 NS() 사용)
    const FOLD_KEY = 'ui_fold_rest';

    // 상태 적용 함수
    function applyFold(folded){
      if (folded) {
        box.classList.add('fold-rest');
        foldBtn.textContent = '▲';
      } else {
        box.classList.remove('fold-rest');
        foldBtn.textContent = '▼';
      }
    }

    // 저장된 상태 불러오기
    let folded = false;
    try {
      folded = localStorage.getItem(FOLD_KEY) === '1';
    } catch(e){}

    applyFold(folded);

    // 클릭 토글
    foldBtn.addEventListener('click', () => {
      folded = !folded;
      applyFold(folded);
      try { localStorage.setItem(FOLD_KEY, folded ? '1' : '0'); } catch(e){}
    });
  });
})();

// 즐겨찾기 박스만 접기 버튼 (리셋 버튼 옆)
(function initFoldFavOnlyAtResetBtn(){
  document.addEventListener('DOMContentLoaded', () => {
    const favBox     = document.getElementById('favBox');
    const favReset   = document.getElementById('favResetBtn');
    if (!favBox || !favReset) return;

    // 버튼 생성
    const foldFavBtn = document.createElement('button');
    foldFavBtn.id = 'foldFavBtn';
    foldFavBtn.className = 'zoomBtn';
    foldFavBtn.title = '즐겨찾기 박스만 접습니다';
    foldFavBtn.style.marginLeft = '4px';
    // 텍스트는 상태 적용 시 세팅

    // 리셋 버튼 바로 오른쪽에 배치
    favReset.insertAdjacentElement('afterend', foldFavBtn);

    // 키 (네임스페이스 함수가 있으면 사용)
    const FOLD_FAV_KEY = 'ui_fold_fav_only';

    function applyFoldFav(folded){
      if (folded) {
        favBox.classList.add('fold-fav');
        foldFavBtn.textContent = '▲';
      } else {
        favBox.classList.remove('fold-fav');
        foldFavBtn.textContent = '▼';
      }
    }

    // 저장된 상태 복원
    let folded = false;
    try { folded = localStorage.getItem(FOLD_FAV_KEY) === '1'; } catch(e){}

    applyFoldFav(folded);

    // 토글
    foldFavBtn.addEventListener('click', () => {
      folded = !folded;
      applyFoldFav(folded);
      try { localStorage.setItem(FOLD_FAV_KEY, folded ? '1' : '0'); } catch(e){}
    });
  });
})();
function nukeImageConfigMapForThisTitle() {
  // 현재 빌드 키 (권장)
  const k1 = IMAGE_CFG_MAP_KEY; // = NS('image_config_map_v1')

  // 레거시/혼합 키 대비
  const maybeTitle = (typeof BOOK_TITLE === 'string' ? BOOK_TITLE.trim() : '');
  const legacyKeys = [
    NS('image_config_map'),                // 과거 NS(파일기반) _v1 없는 버전
    `[${maybeTitle}]:image_config_map_v1`, // 과거 '제목 기반' 네임스페이스 + _v1
    `[${maybeTitle}]:image_config_map`,    // 과거 '제목 기반' 네임스페이스 (무버전)
  ].filter(Boolean);

  const candidates = [k1, ...legacyKeys];
  let removedAny = false;

  for (const key of candidates) {
    try {
      if (localStorage.getItem(key) !== null) {
        localStorage.removeItem(key);
        removedAny = true;
        console.info('[nukeImageConfigMapForThisTitle] removed:', key);
      }
    } catch(e){}
  }

  // 선택: 현재 작품 아래 루트 고정값도 제거(남아있으면 다시 그 루트로 붙음)
  try {
    const savedRoot = localStorage.getItem(DETECTED_ROOT_KEY);
    if (savedRoot) {
      const dec = decodeURIComponent(savedRoot || '');
      // 이 작품(메인폴더) 아래라면 제거
      if (ensureSlash(dec).startsWith(ensureSlash(mainFolderRaw))) {
        localStorage.removeItem(DETECTED_ROOT_KEY);
        console.info('[nuke] removed detected root key too:', DETECTED_ROOT_KEY);
      }
    }
  } catch(e){}

  // 런타임/화면 리셋(안전)
  PAD = 4;
  IMAGE_EXT = 'jpg';
  FIRST_INDEX = null;

  // TOTAL도 초기화 (로컬에 다시 저장하지 않도록 persist:false)
  const orig = (typeof ORIGINAL_TOTAL !== 'undefined') ? ORIGINAL_TOTAL : 0;
  setTotalImages(orig, { persist: false, updateUI: true });
  rebuildFilenameRegex?.();

  // 리스트/셀렉터/뷰 갱신 알림
  document.dispatchEvent(new CustomEvent('subs:changed'));

  // 화면 재로딩(선택) 대신 최소 초기화
  try {
    container.innerHTML = '';
    loaded = 0;
    pageInput && (pageInput.value = 1);
    loadNextBatch?.();
  } catch(e){}

  return removedAny;
}
// 동일한 정규화 유틸(있다면 그거 쓰고, 없다면 최소버전)
function normalizeTitle(s) {
  return String(s || '')
    .replace(/^\uFEFF+/, '')  // BOM
	.replace(/\\/g, '/')
    .replace(/\u200B/g, '')   // zero-width
    .replace(/\u00A0/g, ' ')  // NBSP
    .replace(/\u3000/g, ' ')  // 전각공백
    .replace(/\t+/g, ' ')
    .normalize('NFC')
    .trim()
    .replace(/\s{2,}/g, ' ');
}

function loadWebtoonListArray() {
  const raw = localStorage.getItem(WEBTOON_LIST_KEY);
  if (!raw) return [];

  // 혹시 JSON 배열로 저장되어 있을 수도 있음
  if (raw.trim().startsWith('[')) {
    try {
      const arr = JSON.parse(raw);
      if (Array.isArray(arr)) {
        return Array.from(new Set(arr.map(normalizeTitle).filter(Boolean)))
          .sort((a,b)=> a.localeCompare(b,'ko',{numeric:true,sensitivity:'base'}));
      }
    } catch {} // JSON 아님 → 아래 줄바꿈 처리
  }

  // 기본: 줄바꿈 텍스트
  return Array.from(new Set(
    raw.split(/\r?\n/).map(normalizeTitle).filter(Boolean)
  )).sort((a,b)=> a.localeCompare(b,'ko',{numeric:true,sensitivity:'base'}));
}
function parseListFromTextarea(text) {
  return Array.from(new Set(
    (text || '')
      .split(/\r?\n/)
      .map(normalizeTitle)
      .filter(Boolean)
  )).sort((a,b)=> a.localeCompare(b, 'ko', {numeric:true, sensitivity:'base'}));
}

function saveWebtoonListFromText(text){
  const arr = (text || '')
    .split(/\r?\n/)
    .map(normalizeTitle)
    .filter(Boolean);

  const uniqSorted = Array.from(new Set(arr))
    .sort((a,b)=> a.localeCompare(b,'ko',{numeric:true,sensitivity:'base'}));

  localStorage.setItem(WEBTOON_LIST_KEY, uniqSorted.join('\n')); // 줄바꿈 포맷 유지
}

function loadWebtoonListAsText(){
  const raw = localStorage.getItem('webtoonlist') || '';
  return parseListFromTextarea(raw).join('\n'); // 항상 표준화된 텍스트로 반환
}
function ellipsize(s, max = WEBTOON_LIST_MAX_LEN) {
  const t = String(s || '');
  return t.length > max ? t.slice(0, max - 1) + '…' : t;
}

// 렌더러 교체: 표시/실제 분리 적용
function renderWebtoonList(){
  const box = document.getElementById('wtList');
  if (!box) return;

  const list = loadWebtoonListEntries();
  box.innerHTML = '';

  if (!list.length) {
    const tip = document.createElement('div');
    tip.style.opacity = '.8';
    tip.style.fontSize = 'var(--ui-fs)';
    tip.textContent = '목록이 비어 있습니다. [수정]을 눌러 제목을 추가하세요.';
    box.appendChild(tip);
    return;
  }

  const active = (localStorage.getItem(ACTIVE_TITLE_KEY) || '').trim();

  list.forEach(({display, value}) => {
    const wrap = document.createElement('div');
    wrap.className = 'wt-item-wrap';

    const btn = document.createElement('button');
    btn.className = 'zoomBtn wt-item';
    btn.textContent = ellipsize(display);
    btn.title = value; // 전체 실제제목 툴팁
	// 온라인/로컬 판정
const isOnline = /^https?:\/\//i.test(value);
const isLocal  = /^(?:[a-zA-Z]:[\\/]|\\\\|\/(?:Users|home|mnt|Volumes|storage|sdcard)\/|file:\/\/|content:\/\/)/i.test(value);

if (isOnline) {
  btn.classList.add('wt-online');
} else if (isLocal) {
  btn.classList.add('wt-local');   // 로컬 전용 스타일 적용
}
    btn.style.background = (value === active) ? '#666' : '#444';
    btn.addEventListener('click', () => switchTitleWithReload(value));

    // 🔹 삭제 버튼 추가
    const del = document.createElement('button');
    del.className = 'wtDel';
    del.title = '목록에서 삭제';
    del.textContent = '✕';
    del.addEventListener('click', (e) => {
  e.stopPropagation();
  

  const raw = localStorage.getItem(WEBTOON_LIST_KEY) || '';
  const lines = raw.split(/\r?\n/).filter(Boolean);

  // 🔹 value(실제 제목) 기준으로 일치하는 줄 제거
  const newLines = lines.filter(line => {
    const t = line.trim();
    // "표시|실제" 또는 "실제" 둘 다 처리
    if (t === value) return false;
    if (t.endsWith('|' + value)) return false;
    return true;
  });

  localStorage.setItem(WEBTOON_LIST_KEY, newLines.join('\n'));
  renderWebtoonList();
});

    wrap.appendChild(btn);
    wrap.appendChild(del);
    box.appendChild(wrap);
  });
}

function loadWebtoonListEntries(){
  const raw = localStorage.getItem(WEBTOON_LIST_KEY);
  if (!raw) return [];

  const toEntries = (arr) => {
    const seen = new Set();
    const out = [];
    for (const line of arr.map(normalizeTitle).filter(Boolean)) {
      const ent = splitPair(line);
      const key = ent.value;        // '실제 제목' 기준으로 유니크
      if (!key || seen.has(key)) continue;
      seen.add(key);
      out.push(ent);
    }
    // 표시용 기준 정렬
    out.sort((a,b)=> a.display.localeCompare(b.display,'ko',{numeric:true,sensitivity:'base'}));
    return out;
  };

  if (raw.trim().startsWith('[')) {
    try {
      const arr = JSON.parse(raw);
      if (Array.isArray(arr)) return toEntries(arr);
    } catch {}
  }
  return toEntries(raw.split(/\r?\n/));
}
// 편집 패널 토글/저장/초기화 (구분자 연동 포함)
(function initWebtoonUI(){
  document.addEventListener('DOMContentLoaded', () => {
    const editBtn   = document.getElementById('wtEditBtn');
    const clearBtn  = document.getElementById('wtClearBtn');
    const panel     = document.getElementById('wtEditPanel');
    const ta        = document.getElementById('wtInput');
    const saveBtn   = document.getElementById('wtSaveBtn');
    const cancelBtn = document.getElementById('wtCancelBtn');
    const delimInp  = document.getElementById('wtDelimiter');
	const toggleBtn = document.getElementById('wtToggleBtn');
const listBox   = document.getElementById('wtList');
const hintBox   = document.getElementById('wtHint'); // ← 힌트도 같이 제어

if (toggleBtn && listBox) {
  toggleBtn.addEventListener('click', () => {
    const isHidden = listBox.style.display === 'none';
    listBox.style.display = isHidden ? 'flex' : 'none';
    if (hintBox) hintBox.style.display = isHidden ? 'block' : 'none'; // ← 함께 토글
    toggleBtn.textContent = isHidden ? '▼' : '▲';
  });
}

    if (!editBtn || !panel || !ta || !saveBtn || !cancelBtn) return;

    const openPanel = () => {
      ta.value = (localStorage.getItem(WEBTOON_LIST_KEY) || '');
      if (delimInp) delimInp.value = getPairDelim();
      panel.style.display = 'block';
    };
    const closePanel = () => panel.style.display = 'none';

    editBtn.addEventListener('click', openPanel);
    cancelBtn.addEventListener('click', closePanel);

    saveBtn.addEventListener('click', () => {
      // 목록 저장 (줄바꿈 포맷 유지)
      saveWebtoonListFromText(ta.value);
      // 구분자 저장
      if (delimInp) setPairDelim(delimInp.value);
      closePanel();
      renderWebtoonList();
    });

    clearBtn.addEventListener('click', () => {
      if (!confirm('목록을 모두 비울까요?')) return;
      localStorage.removeItem(WEBTOON_LIST_KEY);
      renderWebtoonList();
    });

    // 최초 렌더
    renderWebtoonList();
  });
})();

// === 작품 전환 ===
// 선택한 제목을 활성화하고 "1회 새로고침"하여 전역 초기화를 새 제목 기준으로 진행
function switchTitleWithReload(title){
  const t = String(title || '').trim();
  if (!t) return;
  localStorage.setItem(ACTIVE_TITLE_KEY, t); // ← 파일별 키
  try { localStorage.removeItem(NS('detected_image_root_v1')); } catch(e){}
  try { localStorage.removeItem(NS('scanned_subfolders_v1')); } catch(e){}
  location.reload();
}

// 선택 해제(파일별로 원래 FILE_ID 네임스페이스로 돌아감)
function clearActiveTitleForThisFile(){
  localStorage.removeItem(ACTIVE_TITLE_KEY);
  location.reload();
}

// "표시|실제" 1회 분할 (이스케이프 \| 지원)
function splitPair(line, delim = getPairDelim()){
  const s = String(line ?? '');
  if (!delim) return { display: normalizeTitle(s), value: normalizeTitle(s) };

  const escapedDelim = delim.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const re = new RegExp(`(?<!\\\\)${escapedDelim}`); // 비-이스케이프 구분자
  const idx = s.search(re);

  let display = s, value = s;
  if (idx >= 0) {
    display = s.slice(0, idx);
    value   = s.slice(idx + delim.length);
  }

  const unescape = (t) => t
    .replace(new RegExp(`\\\\${escapedDelim}`, 'g'), delim) // \| -> |
    .replace(/\\\\/g, '\\')                                 // \\ -> \
    .trim();

  display = normalizeTitle(unescape(display));
  value   = normalizeTitle(unescape(value));
  if (!value) value = display;
  return { display, value };
}

// 목록 로더: [{display, value}] 반환
function loadWebtoonListEntries(){
  const raw = localStorage.getItem(WEBTOON_LIST_KEY);
  if (!raw) return [];

  const toEntries = (arr) => {
    const seen = new Set();   // value(실제제목) 기준 유니크
    const out = [];
    for (const line of arr.map(normalizeTitle).filter(Boolean)) {
      const ent = splitPair(line);
      const key = ent.value;
      if (!key || seen.has(key)) continue;
      seen.add(key);
      out.push(ent);
    }
    out.sort((a,b)=> a.display.localeCompare(b.display,'ko',{numeric:true,sensitivity:'base'}));
    return out;
  };

  if (raw.trim().startsWith('[')) {
    try {
      const arr = JSON.parse(raw);
      if (Array.isArray(arr)) return toEntries(arr);
    } catch {}
  }
  return toEntries(raw.split(/\r?\n/));
}
function setBtnPressed(btn, pressed){
  if (!btn) return;
  btn.classList.toggle('active', !!pressed);
  btn.setAttribute('aria-pressed', pressed ? 'true' : 'false');
}
document.addEventListener('DOMContentLoaded', () => {


  const bgBtns = Array.from(document.querySelectorAll('.bgBtn'));

  function setActiveBg(color){
    bgBtns.forEach(b => {
      const on = (b.getAttribute('data-color') === color);
      setBtnPressed(b, on);                       // 🔹 활성 표시
    });
  }

  // 기존에 배경 적용 로직이 있다면, 그 로직 끝에서 setActiveBg(...)만 호출해 주면 됨.
  // 간단 예시: data-color 값을 body dataset으로만 기록 (실제 배경 변경 로직은 기존 코드 사용)
  bgBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const color = btn.getAttribute('data-color');
      // 기존 배경 변경 함수가 있다면 호출: applyBackground(color) 등
      // 없으면 필요한 만큼만 추가:
      // document.body.dataset.bg = color;

      setActiveBg(color);                         // 🔹 선택 표시
    });
  });

  // 초기 표시(디폴트 'default'로 강조하고 싶다면 여길 바꿔줘)
  setActiveBg('default');
});


// === "목록:꺼짐" + "썸네일:꺼짐" 토글 버튼 추가 ===
(function addGainToggles(){
  document.addEventListener('DOMContentLoaded', ()=>{
    const orientBtn = document.getElementById('toggleOrientationBtn');
    if (!orientBtn) return;

    // 공용 유틸
    const mkBtn = (id, key, label) => {
      const btn = document.createElement('button');
      btn.id = id;
      btn.className = 'zoomBtn';
      btn.style.display = 'inline-block';
      btn.style.marginLeft = (id === 'foldSpaceToFavBtn') ? '4px' : '0';
      let on = localStorage.getItem(key) === '1';
      const sync = () => {
        btn.textContent = `${label}${on ? '' : ''}`;
        btn.classList.toggle('active', on);
      };
      sync();
      btn.addEventListener('click', ()=>{
        on = !on;
        localStorage.setItem(key, on ? '1':'0');
        sync();
      });
      return btn;
    };

    const listBtn = mkBtn('foldSpaceToListBtn', 'fold_space_to_list_on_v1', '목록공간');
    const favBtn  = mkBtn('foldSpaceToFavBtn',  'fold_space_to_fav_on_v1',  '썸네일공간');

    // 가로:꺼짐 바로 아래에 두 버튼 나란히 + 줄바꿈
    orientBtn.insertAdjacentElement('afterend', listBtn);
    listBtn.insertAdjacentElement('afterend', favBtn);
    const br = document.createElement('br');
    favBtn.insertAdjacentElement('afterend', br);
  });
})();

// === fold-rest 여유공간을 목록/썸네일에 반영 (누적 없음, 양쪽 배분 지원) ===


// === 개별 박스 접힘에 따른 상호 증가 (누적 없음) ===
(function bridgePerBoxFoldGain(){
  document.addEventListener('DOMContentLoaded', ()=>{
    const box   = document.getElementById('pageJumpBox');
    const favEl = document.getElementById('favBox');
    const wtEl  = document.getElementById('wtBox');
    if (!box || !favEl || !wtEl) return;

    // 중복 설치 방지
    if (box.dataset.perBoxBridgeInstalled === '1') return;
    box.dataset.perBoxBridgeInstalled = '1';

    // 버튼 ON/OFF 상태
    const listOn = () => localStorage.getItem('fold_space_to_list_on_v1') === '1';
    const favOn  = () => localStorage.getItem('fold_space_to_fav_on_v1')  === '1';

    // 높이 읽기/쓰기
    function getWt(){
      if (typeof wtBoxH === 'number') return wtBoxH;
      const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--wtbox-h')) || 600;
      return v;
    }
    function setWt(v){
      const val = Math.max(50, Math.min(v, 4000));
      if (typeof wtBoxH === 'number') wtBoxH = val;
      if (typeof applyWtBoxSize === 'function') applyWtBoxSize();
      else {
        document.documentElement.style.setProperty('--wtbox-h', val + 'px');
        const lab = document.getElementById('wtBoxHLabel'); if (lab) lab.textContent = String(val);
      }
    }
    function getFav(){
      if (typeof favBoxH === 'number') return favBoxH;
      const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--favbox-h')) || 600;
      return v;
    }
    function setFav(v){
      const val = Math.max(50, Math.min(v, 4000));
      if (typeof favBoxH === 'number') favBoxH = val;
      if (typeof applyFavBoxSize === 'function') applyFavBoxSize();
      else {
        document.documentElement.style.setProperty('--favbox-h', val + 'px');
        const lab = document.getElementById('favBoxHLabel'); if (lab) lab.textContent = String(val);
      }
    }

    // 접힘 판정
    const isFavFolded = () =>
      favEl.classList.contains('fold-fav') ||
      (favEl.clientHeight < 40 && favEl.scrollHeight < 80);
    const isWtFolded = () =>
      (wtEl.clientHeight < 40 && wtEl.scrollHeight < 80);

    // 기준 캡처: 펼친 상태에서만
    function captureOpenBaselinesIfOpen(){
      if (!isFavFolded()) {
        favEl.dataset.baselineFavH = String(getFav());
        favEl.dataset.openFavH     = String(favEl.scrollHeight);
      }
      if (!isWtFolded()) {
        wtEl.dataset.baselineWtH = String(getWt());
        wtEl.dataset.openWtH     = String(wtEl.scrollHeight);
      }
    }
    captureOpenBaselinesIfOpen();

    // 상태 변수(누적방지/스냅샷/재진입가드)
    let favToWtApplied = 0, favToWtDelta = 0;
    let wtToFavApplied = 0, wtToFavDelta = 0;
    let wtBaseSnap  = null;  // fav→wt 적용 '직전' wt 기준
    let favBaseSnap = null;  // wt→fav 적용 '직전' fav 기준
    let inApply = 0;         // 재진입/캡처 방지

    // 되돌림 (추가 set 호출 금지)
    function resetFavToWt(baseWt){
      if (favToWtApplied) {
        const revertTo = (wtBaseSnap != null ? wtBaseSnap : baseWt);
        console.info('[fav→wt] revert to %o (delta=%o)', revertTo, favToWtDelta);
        setWt(revertTo);
        favToWtApplied = 0;
        favToWtDelta = 0;
        wtBaseSnap = null;
      }
    }
    function resetWtToFav(baseFav){
      if (wtToFavApplied) {
        const revertTo = (favBaseSnap != null ? favBaseSnap : baseFav);
        console.info('[wt→fav] revert to %o (delta=%o)', revertTo, wtToFavDelta);
        setFav(revertTo);
        wtToFavApplied = 0;
        wtToFavDelta = 0;
        favBaseSnap = null;
      }
    }

    function applyOnChange(){
      if (inApply) return;
      inApply = 1;
      try {
        const LON = listOn();
        const FON = favOn();
    if (!LON && favToWtApplied) { resetFavToWt(getWt()); }
    if (!FON && wtToFavApplied) { resetWtToFav(getFav()); }

        const baseFav = parseFloat(favEl.dataset.baselineFavH || '') || getFav();
        const baseWt  = parseFloat(wtEl.dataset.baselineWtH  || '') || getWt();

        const HfavOpen = parseFloat(favEl.dataset.openFavH || '') || favEl.scrollHeight;
        const HwtOpen  = parseFloat(wtEl.dataset.openWtH  || '') || wtEl.scrollHeight;

        const favFoldedNow = isFavFolded();
        const wtFoldedNow  = isWtFolded();

        // 1) 둘 다 접힘 → 복원 & 고정
        if (favFoldedNow && wtFoldedNow) {
          resetFavToWt(baseWt);
          resetWtToFav(baseFav);
          setFav(baseFav);
          setWt(baseWt);
          return;
        }

        // 2) 즐겨찾기만 접힘 → 목록으로 여유 전달 (조건: 목록버튼 ON && 목록 접힘 아님)
        if (favFoldedNow && !wtFoldedNow) {
          resetWtToFav(baseFav); // 반대 방향 복원

          const canTransfer = LON && !wtFoldedNow;
          console.info('[fav→wt] enter: LON=%o, baseWt=%o, baseFav=%o', LON, baseWt, baseFav);

          if (canTransfer) {
            if (!favToWtApplied) {
              const HfavFold = favEl.scrollHeight;
              const deltaFav = Math.max(0, HfavOpen - HfavFold);
              wtBaseSnap   = baseWt;          // 적용 직전 스냅샷
              favToWtDelta = deltaFav;

              console.info('[fav→wt] apply(first): Hopen=%o, Hfold=%o, delta=%o, setWt(%o)',
                HfavOpen, HfavFold, deltaFav, baseWt + deltaFav);

              setWt(baseWt + deltaFav);
              favToWtApplied = 1;
              console.info('[fav→wt] applied=1');
            } else {
              console.info('[fav→wt] keep(applied): delta=%o, setWt(%o)', favToWtDelta, baseWt + favToWtDelta);
              
            }
          } else {
            console.info('[fav→wt] cannot-transfer → revert');
            resetFavToWt(baseWt);
            // ❌ 여기서 추가 setWt() 하지 않음 (복원값 덮어쓰기 방지)
          }

          setFav(baseFav); // 즐겨찾기는 기준으로 고정
          return;
        }

        // 3) 목록만 접힘 → 즐겨찾기로 여유 전달 (조건: FON && !favFoldedNow)
if (!favFoldedNow && wtFoldedNow) {
  resetFavToWt(baseWt); // 반대 방향 복원

  const canTransfer = FON && !favFoldedNow;
  if (canTransfer) {
    if (!wtToFavApplied) {
      const HwtFold = wtEl.scrollHeight;
      const deltaWt = Math.max(0, HwtOpen - HwtFold);
      favBaseSnap   = baseFav;     // 💾 적용 직전 스냅샷
      wtToFavDelta  = deltaWt;

      setFav(baseFav + deltaWt);
      wtToFavApplied = 1;
      console.info('[wt→fav] apply(first): delta=%o', deltaWt);
    } else {
      
      console.info('[wt→fav] keep(applied): delta=%o', wtToFavDelta);
    }
  } else {
    console.info('[wt→fav] cannot-transfer → revert');
    resetWtToFav(baseFav);
    // ❌ 여기서 setFav(baseFav) 다시 호출하지 말 것 (복원값 덮임)
  }

  setWt(baseWt); // 목록은 기준으로 고정
  return;
}

        // 4) 둘 다 펼쳐짐
        if (!favFoldedNow && !wtFoldedNow) {
          const hadFavToWt = favToWtApplied;
          const hadWtToFav = wtToFavApplied;

          // 먼저 정확 복원
          resetFavToWt(baseWt);
          resetWtToFav(baseFav);

          // 전송이 모두 해제된 상태에서만 기준 캡처 + 기준값 적용
          // 수정 후
if (!hadFavToWt && !hadWtToFav) {
  captureOpenBaselinesIfOpen();
}
        }
      } finally {
        inApply = 0;
      }
    }

// 관찰자들 (클래스/스타일/접힘속성 + 실높이 변화 모두 감지)
const moOpt = { attributes: true, attributeFilter: ['class', 'style', 'hidden', 'aria-expanded'] };
const moFav = new MutationObserver(()=> requestAnimationFrame(applyOnChange));
const moWt  = new MutationObserver(()=> requestAnimationFrame(applyOnChange));
moFav.observe(favEl, moOpt);
moWt.observe(wtEl,  moOpt);

if ('ResizeObserver' in window) {
  // 높이/레이아웃 변화 자체를 감지해서 applyOnChange 호출
  const roApply = new ResizeObserver(()=> {
    if (!inApply) requestAnimationFrame(applyOnChange);
  });
  roApply.observe(favEl);
  roApply.observe(wtEl);

  // 기준 캡처는 '펼친 상태 & 전송 없음 & 적용 중 아님'일 때만
  const roBaseline = new ResizeObserver(()=> {
    if (!inApply && !isFavFolded() && !isWtFolded() && !favToWtApplied && !wtToFavApplied) {
      captureOpenBaselinesIfOpen();
    }
  });
  roBaseline.observe(favEl);
  roBaseline.observe(wtEl);
}

    // ✅ 버튼 상태 변화를 감지해서 즉시 applyOnChange 호출 (반드시 이 블럭 "안"에)
    let _prevLON = null;
    let _prevFON = null;

    const _readBtnState = () => ([
      localStorage.getItem('fold_space_to_list_on_v1') === '1',
      localStorage.getItem('fold_space_to_fav_on_v1')  === '1'
    ]);

    const _tickBtns = () => {
      const [LON, FON] = _readBtnState();
      if (_prevLON === null) { _prevLON = LON; _prevFON = FON; }
      if (LON !== _prevLON || FON !== _prevFON) {
        console.info('[bridge] button state changed → LON=%o, FON=%o', LON, FON);
        applyOnChange();                 // ← 여기서 내부 스코프의 applyOnChange 접근 가능
        _prevLON = LON; _prevFON = FON;
      }
      requestAnimationFrame(_tickBtns);
    };
    requestAnimationFrame(_tickBtns);

    window.addEventListener('storage', (ev)=>{
      if (!ev || typeof ev.key !== 'string') return;
      if (ev.key === 'fold_space_to_list_on_v1' || ev.key === 'fold_space_to_fav_on_v1') {
        console.info('[bridge] storage event → %s changed', ev.key);
        applyOnChange();
      }
    });

    // 최초 1회
    applyOnChange();
  });
})();

(function bridgeFoldSpaceSplit(){
  document.addEventListener('DOMContentLoaded', ()=>{
    const box = document.getElementById('pageJumpBox');
    if (!box) return;
    if (box.dataset.foldBridgeSplitInstalled === '1') return;
    box.dataset.foldBridgeSplitInstalled = '1';

    const listOn = () => localStorage.getItem('fold_space_to_list_on_v1') === '1';
    const favOn  = () => localStorage.getItem('fold_space_to_fav_on_v1')  === '1';

    // --- get/set 유틸: 목록(wt) ---
    function getWt(){
      if (typeof wtBoxH === 'number') return wtBoxH;
      const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--wtbox-h')) || 600;
      return v;
    }
    function setWt(v){
      const val = Math.max(60, Math.min(v, 4000));
      if (typeof wtBoxH === 'number') wtBoxH = val;
      if (typeof applyWtBoxSize === 'function') {
        applyWtBoxSize(); // wtBoxH -> CSS 변수/라벨 반영
      } else {
        document.documentElement.style.setProperty('--wtbox-h', val + 'px');
        const lab = document.getElementById('wtBoxHLabel');
        if (lab) lab.textContent = String(val);
      }
    }

    // --- get/set 유틸: 썸네일(fav) ---
    function getFav(){
      if (typeof favBoxH === 'number') return favBoxH;
      const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--favbox-h')) || 600;
      return v;
    }
    function setFav(v){
      const val = Math.max(60, Math.min(v, 4000));
      if (typeof favBoxH === 'number') favBoxH = val;
      if (typeof applyFavBoxSize === 'function') {
        applyFavBoxSize(); // favBoxH -> CSS 변수/라벨 반영 (있다면)
      } else {
        document.documentElement.style.setProperty('--favbox-h', val + 'px');
        const lab = document.getElementById('favBoxHLabel');
        if (lab) lab.textContent = String(val);
      }
    }

    // --- 기준값: "펼쳐진 상태"에서만 갱신 ---
    function captureOpenBaselines(){
      if (box.classList.contains('fold-rest')) return;
      box.dataset.baselineWt  = String(getWt());
      box.dataset.baselineFav = String(getFav());
      box.dataset.openHeight  = String(box.scrollHeight); // H_open
    }

    captureOpenBaselines();
    box.dataset._wasFolded = box.classList.contains('fold-rest') ? '1' : '0';

    const mo = new MutationObserver((mutations)=>{
      if (!mutations.some(m => m.type === 'attributes' && m.attributeName === 'class')) return;

      const wasFolded = box.dataset._wasFolded === '1';
      const isFolded  = box.classList.contains('fold-rest');
      if (wasFolded === isFolded) return;

      requestAnimationFrame(()=>{
        const H_open = parseFloat(box.dataset.openHeight || '') || box.scrollHeight;

        if (isFolded) {
          // 접힘 → 현재 높이(H_fold)로 델타 산출
          const H_fold = box.scrollHeight;
          const delta  = Math.max(0, H_open - H_fold);

          const baseWt  = parseFloat(box.dataset.baselineWt  || '') || getWt();
          const baseFav = parseFloat(box.dataset.baselineFav || '') || getFav();

          const lo = listOn(), fo = favOn();

          if (!lo && !fo) {
            // 아무 데도 전달 안 함
          } else if (lo && !fo) {
            setWt(baseWt + delta);
            setFav(baseFav);
          } else if (!lo && fo) {
            setFav(baseFav + delta);
            setWt(baseWt);
          } else {
            // 둘 다 ON → 반반 배분(반올림 보정)
            const a = Math.floor(delta / 2);
            const b = delta - a;
            setWt(baseWt + a);
            setFav(baseFav + b);
          }
        } else {
          // 펼침 → 기준으로 복원 + 새로운 기준 캡처
          const baseWt  = parseFloat(box.dataset.baselineWt  || '') || getWt();
          const baseFav = parseFloat(box.dataset.baselineFav || '') || getFav();
          setWt(baseWt);
          setFav(baseFav);
          requestAnimationFrame(captureOpenBaselines);
        }

        box.dataset._wasFolded = isFolded ? '1' : '0';
      });
    });

    mo.observe(box, { attributes: true, attributeFilter: ['class'] });

    // 펼친 상태에서 외부 조작(버튼/드래그 등)으로 높이가 바뀌면 새 기준으로 채택
    if ('ResizeObserver' in window) {
      const wtListEl  = document.getElementById('wtList');
      const favListEl = document.querySelector('#favBox #favList');
      const ro = new ResizeObserver(()=>{
        if (!box.classList.contains('fold-rest')) captureOpenBaselines();
      });
      wtListEl  && ro.observe(wtListEl);
      favListEl && ro.observe(favListEl);
    }
  });
})();
</script>

</body>
</html>